Este es mi componente:
<template> <span class="pt-3"> <GoodMacroElement v-for="goodMacro in goodMacroData" :macro="goodMacro" :index="counter++" class="row mt-3"></GoodMacroElement> </span> </template> <script> import GoodMacroElement from "./GoodMacroElement" export default { components:{ GoodMacroElement }, name: "goodMacros", data(){ return { name: 'GoodMacros', goodMacroData: null, counter:0 } }, beforeMount() { this.goodMacroData = window.GOOD_MACROS; }, } </script> <style scoped> </style> Estoy tratando de pasar un número que comienza desde 0 usando el prop llamado index , al componente secundario
<GoodMacroElement v-for="goodMacro in goodMacroData" :macro="goodMacro" :index="counter++" class="row mt-3"></GoodMacroElement> Pero cuando compruebo el valor del index en cada GoodMacroElement, el primero tiene el índice = 909¿?¿?¿, ¿cómo puedo hacer que este valor comience desde 0?
Utilice el index proporcionado por el propio Vue.
<div v-for="(item, index) in items" :key="item.name"></div>
const { createApp } = Vue; createApp({ data() { return { goodMacroData: [ {name: 'macro A'}, {name: 'macro B'} ] } } }).mount('#app') <script src="https://unpkg.com/vue@3"></script> <div id="app"> <div v-for="(goodMacro, index) in goodMacroData" :key="goodMacro.name"> {{ index }}: {{ goodMacro.name }} </div> </div>Razón:
Cuando usa variables reactivas en plantillas y la variable está mutada, Vue volverá a representar la plantilla por usted.
En su ejemplo, estaba usando el counter de var reactivo en la plantilla. Esto significa que cuando algo cambie el valor de counter , Vue volverá a representar la plantilla y su bucle v-for .
El problema es que estabas mutando el counter en el bucle, con counter++
Entonces, cada vez que Vue muestra la lista, los datos reactivos subyacentes cambian y Vue tiene que volver a mostrar la lista, volver a actualizar el counter , etc. Cada counter de tiempo comienza en el valor que tenía al final del último renderizado.
Puede ver aquí: al presionar el botón, simplemente se ejecuta el counter++ y puede ver que la lista se vuelve a generar y todos los conteos aumentan.
const { createApp } = Vue; createApp({ data() { return { counter:0, goodMacroData: [ {name: 'macro A'}, {name: 'macro B'} ] } } }).mount('#app') <script src="https://unpkg.com/vue@3"></script> <div id="app"> <div v-for="goodMacro in goodMacroData" > {{ counter++ }} </div> <button @click="counter++"> increment counter </button> </div>Probablemente tuvo algunas advertencias sobre la recursividad máxima, etc. en la consola, ya que es un bucle infinito.
Usando el contador de index incorporado, no muta nada, por lo que Vue no vuelve a renderizar.