0
167
VistasPor qué la actualización dinámica de matriz anidada no funciona en mi caso
Hola, tengo un problema con la actualización dinámica de matriz anidada como se muestra en la imagen de abajo
Aquí hay algunos pasos para volver a producir el problema.
- haga clic en el botón
Add Likes, agregará Me gusta, por ejemplo,New Apple - mi gusto por defecto es
Mango - haga clic en el botón
Add aboutde, agregará la siguiente fila (Mango no aparece) haga clic enAdd Likespara ver el problema.
Para reducir la legibilidad del código, he puesto la función de ayuda en un archivo mixin llamado mixin.js
Expectativa: puedo agregar cualquier cantidad de Add about y Add Likes (con el valor predeterminado Mango )
Aquí está mi código:https://codesandbox.io/s/musing-hawking-di4d3?file=/src/App.vue
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Primero, no necesita una matriz anidada para la propiedad de etiquetas. Usar:
getLikesTemplate() { let year = this.year; let template = { id: this.getUniqueId(), like: `I'm ${year} Old and like things like`, tags: [this.getTagsTemplate("Mango")] //nesting removed }; this.year++; return template; }En segundo lugar, en JS los objetos se pasan por referencia, por lo que puedes hacer esto:
método:
addLikes(like) { //removed the extra code like.tags.push(this.getTagsTemplate("New Apple")); },modelo:
... <div style="text-align: left; display: flex"> <div> //nesting removed <div class="tags" v-for="tag in like.tags" :key="tag.id"> {{ tag.name }} </div> </div> //passing the reference to the object <button style="margin-left: 20px" @click="addLikes(like)"> Add Likes </button> </div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta