如果数据元素的索引更改，则重新呈现 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);

        }
    }
})

Answer 2

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

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

Re-render DOM if index of data elements changed

javascript

vue.js

vuejs2