vue.js - 当数组值更改时，Vue 不渲染数组更新 View

Question

Vue 应用使用 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 的值不会更新 View 已被更改。
我尝试添加 v-bind:key=index到 span标签，但这并没有影响任何事情。
要呈现更新的数组，应用程序必须如何工作？
我怎么了？

Answer 1

你可以使用 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

更多信息 $set方法和 react 性深入 here