Vue - DOM не обновляется при выполнении .sort () для массива

Question

Я пытаюсь отсортировать некоторые JSON данные, используя Vue. При проверке через консольный отладчик 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 part:

<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 не обновляется?

Answer 1

В конце концов попал - спасибо за вашу помощь

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

Answer 2

Наиболее вероятным является то, что метод 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();
  });
}