Question

V-model 数组项尽管有引用但无法更新

2019-10-30

38

javascript vue.js

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

* 我尝试为引用的 v-model 创建一个计数器。我做了类似的事情。但它不起作用：

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 来增加数组。

还请注意 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>