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);

        }
    }
})

Answer 2

Changing value in an array with the [] operator won't let vue detect the change，替换数组是解决此问题的一种方法，或者您可以使用指南建议的稍微更好的arr.splice(index, 1, newVal)解决方案。

如果数据元素的索引发生更改，则重新呈现DOM

2 个答案: