Vue - 在数组上执行 .sort() 时 DOM 未更新答案

【问题标题】：Vue - DOM is not updating when doing .sort() on arrayVue - 在数组上执行 .sort() 时 DOM 未更新
【发布时间】：2020-02-06 15:07:43
【问题描述】：

我正在尝试使用 Vue 对一些 JSON 数据进行排序。通过 Vue 控制台调试器检查时数据会发生变化，但实际的 DOM 没有得到更新。

这是我的 Vue 代码：

Array.prototype.unique = function () {
  return this.filter(function (value, index, self) {
    return self.indexOf(value) === index;
  });
};
if (!Array.prototype.last) {
  Array.prototype.last = function () {
    return this[this.length - 1];
  };
};
var vm = new Vue({
  el: "#streetleague-news",
  data: {
    allItems: [],
    itemTypes: [],
    itemTypesWithHeading: [],
    selectedType: "All",
    isActive: false,
    sortDirection: "newFirst",
    paginate: ['sortedItems']
  },

  created() {
    axios.get("/umbraco/api/NewsLibraryApi/getall")
      .then(response => {
         // JSON responses are automatically parsed.
         this.allItems = response.data;
         this.itemTypes = this.allItems.filter(function (x) {
           return x.Tag != null && x.Tag.length;
         }).map(function (x) {
           return x.Tag;
         }).unique();
       });
  },

  computed: {
    isAllActive() {
        return this.selectedType === "All";
    },
    filteredItems: function () {
        var _this = this;
        return _this.allItems.filter(function (x) {
            return _this.selectedType === "All" || x.Tag === _this.selectedType;
        });
    },
    sortedItems: function () {
        var _this = this;
        var news = _this.filteredItems;
        if (_this.sortDirection === 'newFirst') {
            news.sort(function (a, b) {
              return new Date(b.PostDate) - new Date(a.PostDate);
            });
        } else {
            news.sort(function (a, b) {
              return new Date(a.PostDate) - new Date(b.PostDate);
            });
        }
        return news;

    }
  },

  methods: {
    onChangePage(sortedItems) {
      // update page of items
      this.sortedItems = sortedItems;
    }
  }
});

这是一个 HTML 部分：

<paginate class="grid-3 flex" name="sortedItems" :list="sortedItems" :per="12" ref="paginator">
            <li class="flex" v-for="item in paginated('sortedItems')">

似乎不起作用的位是sortedItems: function () {....

谁能看到为什么 DOM 没有更新？

【问题讨论】：

标签： sorting vue.js dom updating

【解决方案1】：

最有可能的是 sort() 方法无法识别 Date 对象的优先级。改用 js 时间戳：

if (_this.sortDirection === 'newFirst') {
  news.sort(function (a, b) {
    var dateA = new Date(a.PostDate);
    var dateB = new Date(b.PostDate);
    return dateB.valueOf() - dateA.valueOf();
  });
} else {
  news.sort(function (a, b) {
    var dateA = new Date(a.PostDate);
    var dateB = new Date(b.PostDate);
    return dateA.valueOf() - dateB.valueOf();
  });
}

【讨论】：

感谢 Dimitris 回来，感谢。这没有什么区别 - 存在同样的问题。如果我要使用“Vue.set”你知道我会如何在我的代码中使用它吗？
不确定。也许你的组件有问题

【解决方案2】：

终于到了 - 感谢您的帮助

sortedItems: function () {
        var _this = this;
        var news = _this.allItems;
        if (_this.sortDirection === 'newFirst') {
            news.sort(function (a, b) {
                var dateA = new Date(a.PostDate);
                var dateB = new Date(b.PostDate);
                return dateB.valueOf() - dateA.valueOf();
            });
        } else {
            news.sort(function (a, b) {
                var dateA = new Date(a.PostDate);
                var dateB = new Date(b.PostDate);
                return dateA.valueOf() - dateB.valueOf();
            })
        }
        return news.filter(x => {
            return _this.selectedType === "All" || x.Tag === 
 _this.selectedType;
        });
    }

【讨论】：