Question

我的主要目的是收集多个库存的需求数量（未来用途）。

*我试图为引用的v模型建立一个计数器。我做了这样的事情。但这不起作用：

new Vue({
    el: '#app',
    data: {
      counter: []
    },
    methods: {
      increment(x) { 
        this.counter[x]++
      }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="i in 2">
  <div><input type="text" v-model="counter[i]"></div>
  <button v-on:click="increment(i)">Increment</button>
  </div>
</div>

是否有其他方法可以做到这一点？我想念什么吗？

Answer 1

您的代码无法正常工作有两个原因：

A）您的数组为空，因此当您将counter[i]用作v模型时，您正在使用undefined，该值不能递增。

B）您正在按索引对数组进行变异，这不适用于Vue。要对数组进行突变，应使用push或splice之类的方法。

要修复代码，必须解决两个问题。也就是说，您必须使用数字值初始化数组，然后通过函数对数组进行变异，如下所示：

new Vue({
el: '#app',
data: {
    counter: [0, 0]
},
methods: {
    increment(x) { 
        this.counter.splice(x, 1, this.counter[x] + 1);
    }
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
    <div v-for="(val, i) in counter">
        <div><input type="text" v-model="counter[i]"></div>
        <button v-on:click="increment(i)">Increment</button>
    </div>
</div>

请注意，我也将模板更改为使用(val, i) in counter而不是i in 2。这样做是为了可以从起始索引访问数组。 val是元素，i是索引，因此您可以使用i来增加数组。

还要注意使用splice。它的作用是将数组的第x个元素替换为其自己的第x个元素，但要递增。

Answer 2

这可能并不漂亮，但是可以起作用：

var vm = {
  el: '#app',
  data: {
    counterel1: 0,
    counterel2: 0,
  },
  methods: {
    increment(x) {
      this.counter[x-1]++;
      console.log(this.counter);
    }
  }
}

vm.data.counter = [vm.data.counterel1, vm.data.counterel2];

new Vue(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="i in 2">
    <div><input type="text" v-model="counter[i]"></div>
    <button v-on:click="increment(i)">Increment</button>
  </div>
</div>

尽管有参考，但V模型数组项无法更新

2 个答案: