如何使用 Vue.js 仅更改特定块的数据值？答案

【问题标题】：How to change Data value only for a specific block with Vue.js?如何使用 Vue.js 仅更改特定块的数据值？
【发布时间】：2021-05-01 19:37:09
【问题描述】：

我将创建一个简单的 Vue.js 应用程序，在我的应用程序中，我有计数器块，我使用 v-for 渲染它，在我的 data 中我有 'counter: 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>

【问题讨论】：

看看我用数组写的解决方案，我刚刚修好了
那是因为这两种方法都在递增同一个数据源。如果您想将它们分开，最好的方法是创建一个独立的计数器组件并在模板中使用它两次。这将使他们的计数数据完全分开，并保持您的代码干燥。

标签： javascript vue.js

【解决方案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>

【讨论】：

【解决方案2】：

像这样使用数组作为计数器

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 这个值它会发生变化）

【讨论】：