如何僅使用 Vue.js 更改特定塊的數據值？

Question

我將創建一個簡單的 Vue.js 應用程序，在我的應用程序中，我有計數器塊，我用v-for渲染，在我的data中我有“計數器：0”實例，我只想增加和減少一個塊單擊發生時的元素，現在我有不需要的行為，當按下按鈕時，兩個塊的數值都會發生變化。 我該如何解決這個問題？

 var example1 = new Vue({ el: '#example-1', data: { counter: 0 }, methods:{ increment(){ this.counter++ }, decrement(){ this.counter-- } } })

 .firs-comp{ border:2px solid red; margin-top:10px; margin-bottom:10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="example-1"> <div class="firs-comp"> <button v-on:click="increment">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> <button v-on:click="decrement">remove 1</button> </div> <div class="firs-comp"> <button v-on:click="increment">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> <button v-on:click="decrement">remove 1</button> </div> </div>

Answer 1

試試這個？

 var example1 = new Vue({ el: '#example-1', data: { counter: { 1: 0, 2: 0 } }, methods: { increment(i) { let counterdata = this.counter[i]; this.counter = {...this.counter, [i]: counterdata+1}; }, decrement(i) { let counterdata = this.counter[i]; this.counter = {...this.counter, [i]: counterdata-1}; } } })

 .firs-comp { border: 2px solid red; margin-top: 10px; margin-bottom: 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="example-1"> <div v-for="i in 4" class="firs-comp"> <button v-on:click="increment(i)">Add {{ i }}</button> <p>The button above has been clicked {{ counter[i] }} times.</p> <button v-on:click="decrement(i)">remove {{ i }}</button> </div> </div>

Answer 2

像這樣使用 arrays 作為計數器

 var example1 = new Vue({ el: '#example-1', data: { counter: new Array(2).fill(0) }, methods:{ increment(i){ this.counter.splice(i, 1, this.counter[i]+1) }, decrement(i){ this.counter.splice(i, 1, this.counter[i]-1) }, } })

 .firs-comp{ border:2px solid red; margin-top:10px; margin-bottom:10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="example-1"> <div class="firs-comp"> <button @click="increment(0)">Add 1</button> <p>The button above has been clicked {{ counter[0] }} times.</p> <button @click="decrement(0)">remove 1</button> </div> <div class="firs-comp"> <button @click="increment(1)">Add 1</button> <p>The button above has been clicked {{ counter[1] }} times.</p> <button @click="decrement(1)">remove 1</button> </div> </div>

如果您需要將它與v-for一起使用，您可以執行類似的操作

<div id="example-1">
  <div v-for="(_, i) in counter" class="firs-comp">
    <button @click="increment(i)">Add 1</button>
    <p>The button above has been clicked {{ counter[i] }} times.</p>
    <button @click="decrement(i)">remove 1</button>
  </div>
</div>

this.counter.splice(i, 1, this.counter[i]+1)的用法是告訴 vue 這個值發生了變化，否則它不會知道也不會顯示變化（即使它會如果你 console.log 改變值）