Question

我从官方示例中获得了更新grid example。在我的应用程序中需要将填充sortOrders数组移动到

 created: function () {
        var vm = this;
        this.columns.forEach(function (key) {
      vm.sortOrders[key] = 1
    })
  },

尝试对列进行排序，但排序只发生一次。

重现的步骤：点击＆＃34;名称＆＃34;列标题超过1次。期望：每次点击列标题时进行列排序得到：列排序只有一次。

https://jsfiddle.net/xkkbfL3L/1916

不明白为什么

Vue.set(this.sortOrders, key, order);

强制this.sortOrders变量

如果使用像

这样的tmp变量，它的工作正常

   var order = this.sortOrders[key]*-1;
   var tmp = this.sortOrders ;
   Vue.set(tmp, key, order); 
   this.sortOrders = [];
   this.sortOrders = tmp;

https://jsfiddle.net/xkkbfL3L/1919/

Answer 1

当您将1更改为-1并且对我来说似乎不是预期的行为时，看起来Vue没有触发更新。在Vue的Github页面上可能值filing an issue，其中一个vue开发者可以解释更多有关此行为的信息。不过，作为一种快速解决方法，您只需在应用更新的密钥值之前将this.sortKey设置为null：

sortBy: function (key) {
  this.sortKey = null;
  this.sortKey = key;
  var order = this.sortOrders[key]*-1;
  Vue.set(this.sortOrders, key, order);
}

这是JSFiddle：https://jsfiddle.net/xkkbfL3L/1920/

Answer 2

得到了Vue Github的答案https://github.com/vuejs/vue/issues/6933

问题是应用程序在此之前已经创建了这些密钥，即在创建时 - 并且不会使用$ set（）。

created: function () {
    var vm = this;
    this.columns.forEach(function (key) {
  vm.$set(vm.sortOrders, key, 1)
})

}，

https://jsfiddle.net/Linusborg/xkkbfL3L/1927/

VueJs2计算不更新。为什么？

2 个答案: