重新渲染DOM如果数据元素的索引改变

Question

Vue.js犯规检测我交换在我的数据对象2个数组元素：

data: { 
    list: [ 
    'Foo', 
    'Bar', 
    'Test' 
    ] 
} 

方法来交换条目：

swapIndex: function(from, to) { 

    var first = this.list[from]; 
    this.list[from] = this.list[to]; 
    this.list[to] = first; 

} 

的jsfiddlehttps://jsfiddle.net/aaroniker/r11hxce8/

我想重新渲染v-for循环，如果我交换索引。

谢谢！

Answer 1

这里是我带来的解决方案。我创建了列表的副本，以修改它，我调用this.$set()方法就行了：

new Vue({ 
    el: '#app', 
    data: { 
     list: [ 
      'Foo', 
      'Bar', 
      'Test' 
     ] 
    }, 
    methods: { 
     swapIndex: function(from, to) { 
      var copy = JSON.parse(JSON.stringify(this.list)) 
      var first = copy[from]; 
      copy[from] = copy[to]; 
      copy[to] = first; 
      this.$set(this,'list',copy) 
      console.log(this.list); 

     } 
    } 
}) 

Answer 2

Changing value in an array with the [] operator won't let vue detect the change，更换阵列是解决这个的一种方式，也可以使用arr.splice(index, 1, newVal)稍微更好的解决方案由指南建议。