重新渲染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)稍微更好的解決方案由指南建議。