时间戳

首页 > 解决方案 > 尽管有参考，V-model 数组项无法更新

javascript - 尽管有参考，V-model 数组项无法更新

问题描述

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

* 我试图为引用的 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>

有不同的方法可以做到这一点吗？我错过了什么吗？

标签： javascriptvue.js

解决方案

您的代码不起作用有两个原因：

A）您的数组是空的，因此当您counter[i]用作 v-model 时，您正在使用undefined，它不能增加。

B）您正在按索引更改数组，这不适用于 Vue。要改变数组，您应该使用类似pushor的方法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数组的第 th 元素替换为它自己的x第 th 元素，但递增。

推荐阅读