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

时间:2018-08-22 10:30:04

标签: vue.js

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的值已更改,但视图未更新。
我尝试将v-bind:key=index添加到span标记中,但这没有任何影响。
要渲染更新的数组,应用程序必须如何工作?
我怎么了

1 个答案:

答案 0 :(得分:0)

您可以使用Vue的cs <- Reduce(function(x, y) if (max(x[1], x[3]) < 5) x + y else y, Map(c, egdf1$invalid, egdf1$valid, egdf1$predicted_inv), accumulate = TRUE) co <- do.call(rbind.data.frame, cs) names(co) <- c("co_inv", "co_val", "co_prd_inv") co$trend <- ifelse(pmax(co$co_inv, co$co_prd_inv) >= 5, "Yes", "No") all.equal(cbind(egdf1, co), egdf2) # [1] TRUE 方法来更改数组元素。

$set

Fiddle

有关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]); } } }) 方法和深度反应性here

的更多信息