Al iniciar la página, sucede esto:
Todo lo que quería es simplemente devolver 1 con el método showData. ¿Alguien puede decirme qué está mal en este código?
<script> var products = Vue.createApp ({ el:"#products", data: function() { return { productList: [], product: { sku: 0, name: '', price: 0, attr: { size: 0, weight: 0, dimensions: { h: 0, w: 0, l: 0 } } } } }, components: ['sku'], methods:{ addProduct: function(){ this.productList.push(this.product) console.log(this.productList[0]['sku']) }, showData: function(){ return '1' } } }) products.mount("#products") products.component('product', { template: ` <span> {{ this.sku }}<br> {{ this.name }}<br> {{ this.price }}<br> {{ this.size }} </span> ` , data: function(){ return { 'sku': products.productList[0]['sku'], 'name': 'name', 'price': 100, 'size': 10 } } }) console.log(products.showData())La instancia de la aplicación no es una instancia del componente raíz. Para acceder a un componente, se debe almacenar adicionalmente una referencia.
Como muestra la documentación :
const app = Vue.createApp(RootComponent) const vm = app.mount('#app') Entonces se supone que vm tiene showData , etc.