Tengo una sheets de matriz inicializada en datos, tiene un elemento presionado cuando se presiona un botón
data() { return { sheets: [] }; } Y en el html estoy tratando de agregar un componente de Card para cada elemento en esta matriz y pasar los datos como apoyo, pero ninguno de los componentes se procesa y no hay ningún mensaje de error. También intenté poner el v-for directamente en el componente pero tiene el mismo resultado
<div id="sheets"> <template v-for="c in sheets"> <Card :info="c"/> </template> </div>Mientras tanto, si hago algo como esto, muestra todos los datos en la matriz correctamente, por lo que no entiendo qué está mal aquí.
<div id="sheets"> <template v-for="c in sheets"> <span>{{c}}</span> </template> </div>--
Solución En mi componente, los datos de prop estaban siendo manipulados en la función created (), funciona después de que hice esto en la función montada () en su lugar
Asegúrese de haber hecho las siguientes cosas correctamente :
Cardprops Lo siguiente que necesita saber y es imprescindible al usar v-for es agregar :key al elemento que actúa como una identificación única y permite que Vue detecte que cada elemento es único dentro de v-for . Una cosa a tener en cuenta al usar :key es que no puede usar :key en la etiqueta <template> .
Agregar una validación usando v-if sería una buena idea, por lo que v-for solo se ejecuta si la matriz no está vacía.
<div id="sheets"> <template v-if="sheets.length"> <Card v-for="(sheet,index) in sheets" :key="index" :info="sheet" /> </template> </div> Edición 1: como mencionó Michal en la sección de comentarios, el uso del index puede generar dificultades durante la depuración de problemas. Puede usar :key="sheet" o si sheet es un objeto que incluye una id única, luego use :key="sheet.id" y elimine el index
// use this if sheet is not an object <div id="sheets"> <template v-if="sheets.length"> <Card v-for="sheet in sheets" :key="sheet" :info="sheet" /> </template> </div>O
// use this if sheet is an object having some unique id in it <div id="sheets"> <template v-if="sheets.length"> <Card v-for="sheet in sheets" :key="sheet.id" :info="sheet" /> </template> </div>Como :key no es obligatorio, también debería funcionar sin eso. Acabo de crear un violín de trabajo a continuación. Por favor, eche un vistazo e intente encontrar la causa raíz.
Vue.component('card', { props: ['info'], template: '<span>{{ info }}</span>', }); var app = new Vue({ el: '#app', data: { sheets: [], count: 0 }, methods: { create() { this.count++; this.sheets.push('Sheet' + this.count); } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button @click="create">Create a Card!</button> <template v-for="c in sheets"> <Card :info="c"></Card> </template> </div>