javascript - 尽管有引用，V-model 数组项仍无法更新

Question

我的主要目的是收集多个库存( future 使用)的请求数量。

* 我试图为引用的 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-model 时，你使用的是 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 来递增数组。

还要注意拼接的使用。它所做的是用它自己的 x 元素替换数组的第 x 元素，但递增。