如何在页面加载时对对象进行排序？ Vue答案

【问题标题】：How to sort objects on page load? Vue如何在页面加载时对对象进行排序？ Vue
【发布时间】：2020-10-28 23:52:18
【问题描述】：

我创建了一个表，用户可以在其中通过选定的valuessort 项目，问题是，我使用的是 vue watcher，并且在页面加载时它似乎不是 @987654325 @项目被观看value，如果我手动选择value，它可以工作。

我试图在 created 方法上定义数据对象排序的观察值，this.sort = 'created_at'，似乎没有帮助。

HTML：

 <select v-model="sort">
    <option value="date_installed" selected>Latest</option>
    <option value="status">Status</option>
 </select>

data: () => ({
  affiliates: {},
  filtered: {},
  sort: '',
}),
created() {
  this.sort = 'date_installed';

      axios.get('/dashboard/affiliates')
    .then(res => {
      let data = res.data;
      this.affiliates = data.affiliates.filter(obj => {
        return obj;
      });
      this.filtered = data.affiliates.filter(obj => {
        return obj;
      });
    })
},
watch: {
 sort: function (val) {
    return this.filtered = _.orderBy(this.affiliates, val, 'desc');
  },
},

如何解决这个问题并在页面加载时立即按 created_at 值对表格进行排序？

【问题讨论】：

我必须手动从选择元素中选择一个值才能订购商品。我希望项目将按默认值“created_at”进行排序
这听起来很简单，但现在坚持尝试。清楚我在问什么吗？
请阅读How to create a Minimal, Reproducible Example

标签： javascript vue.js vuejs2

【解决方案1】：

这里不使用观察者，而是使用计算属性：

watch: {
 sort: function (val) {
    return this.filtered = _.orderBy(this.affiliates, val, 'desc');
  },

喜欢：

computed: {
 sorted: function () {
    return _.orderBy(this.affiliates, this.sort, 'desc');
  },

然后像使用普通属性一样使用 this.sorted 的值

【讨论】：