Tengo una aplicación muy simple que incrementa el valor del contador para cada elemento de la matriz individualmente. el problema es que cuando estoy incrementando el valor del contador, se actualiza para todos los elementos de la matriz
sé que es posible actualizar el valor del contador con cada índice de la matriz, pero no puedo encontrar una mejor manera de hacerlo
<script setup> const counter = ref(0) const increment = () => { counter.value = counter.value + 1 } const data = [{ name: 'john' }, { name: 'paul' }] </script> <template> <div v-for="item in data" :key="item.name"> <div style="display: flex; gap:2rem"> <span>Name: {{ item.name }}</span> <span>Age:{{ counter }}</span> <button @click="increment"> increment </button> </div> </div> </template>Ahora solo tienes un contador. Entiendo que quieres contador individual para cada persona.
Nuestra gente es:
1. { name: 'john' } 2. { name: 'paul' }Si queremos tener un contador individual, debemos agregar un contador para una persona individual (con el estado predeterminado, por lo que el contador es igual a 0):
1. { name: 'john', counter: 0 } 2. { name: 'paul', counter: 0 }Ahora podemos eliminar nuestro contador único y la función de incremento:
const counter = ref(0) const increment = () => { counter.value = counter.value + 1 }A continuación, cambie el contador mostrado (para manejar nuestro nuevo contador individual) de:
<span>Age:{{ counter }}</span>a:
<span>Age:{{ item.counter }}</span>Y nuestra función de clic debería incrementar el contador individual de la persona, por lo que:
<button @click="item.counter++"> increment </button>Lo último es envolver nuestra variable de datos en ref. Lo mismo que hiciste con un solo contador. Tenemos que compartir el estado entre las renderizaciones:
const data = ref([ { name: 'john', counter: 0 }, { name: 'paul', counter: 0 }, ]);Al final nuestro código debería verse así:
<script setup> import { ref, computed } from 'vue'; const data = ref([ { name: 'john', counter: 0 }, { name: 'paul', counter: 0 }, ]); </script> <template> <div v-for="item in data" :key="item.name"> <div style="display: flex; gap: 2rem"> <span>Name: {{ item.name }}</span> <span>Age:{{ item.counter }}</span> <button @click="item.counter++">increment</button> </div> </div> </template>Y hay un stackblitz: https://stackblitz.com/edit/vitejs-vite-xthp6v?file=src%2Fcomponents%2FHelloWorld.vue
Para lograr el requisito, debe vincular la propiedad del counter en cada objeto. Para que puedas jugar con él individualmente.
Demostración de trabajo:
new Vue({ el: '#app', data: { data: [{ name: 'john', counter: 0 }, { name: 'paul', counter: 0 }], }, methods: { increment(index) { this.data[index].counter = this.data[index].counter + 1 } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="(item, index) in data" :key="index"> <div style="display: flex; gap:2rem"> <span>Name: {{ item.name }}</span> <span>Age: {{ item.counter }}</span> <button v-on:click="increment(index)"> increment </button> </div> </div> </div>