javascript - 如果数据元素的索引发生变化，则重新渲染 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;

}

JsFiddle https://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);

        }
    }
})