代码之家 › 专栏 › 技术社区 › Andrew Li

当数组值更改时,Vue不呈现数组更新视图

vue.js

1

Andrew Li · 技术社区 · 7 年前

v-for 用于正常呈现数组或列表。
这是一个例子。
JsFiddle Example

 new Vue({
  el:'#mainapp',
  data:{
    items:[0,0, 0]
  },
  methods:{
    updateVaule:function(index){
      this.items[index]++;
      alert('current value'+this.items[index]);
    }
  }
})

//Html file

    <div id="mainapp">
      <span v-for="(item,index) in items" v-on:click="updateVaule(index)">{{item}}</span>
    </div>

但是当用户点击 span 标记,视图不会通过值 items 已经改变了。
我试着加上 v-bind:key=index 跨度 标签,但这没有影响任何东西。
要呈现更新的数组,应用程序必须如何工作?
我怎么了?

1 回复 | 直到 7 年前

1

0

Erubiel 7 年前

你可以用Vue的 $set 方法更改数组元素。

new Vue({
  el:'#mainapp',
  data:{
    items:[0,0, 0]
  },
  methods:{
    updateVaule:function(index){
      this.$set(this.items, index, this.items[index] + 1)
      alert('current value'+this.items[index]);
    }
  }
})

Fiddle

更多信息 $集 方法和深度反应性 here