Javascript 基于数据中的参数值渲染组件

我正在加载使用待办事项列表功能创建的数据，用户可以按照自己想要的方式对列表进行排序。返回的数据不符合用户保存的顺序。该数据包含一个带有订单索引的数据参数

const userGoals={ 阿伦：{ 订单：2， 目标：[学习JavaScript，学习VueJS，学习反应。] }, 科尔：{ 订单：1， 目标：[学习JavaScript，学习绘画，学习空手道。] }, 卢卡斯：{ 订单：0， 目标：[学习画画，建造独木舟，学习绘画。] } } Vue.组件“目标列表”{ 道具：{ 用户：对象 }, 模板：` {{user.order}{{index} {{goal}} ` }; 变量列表=新的Vue{ el:'用户列表'， 数据：{ 用户：用户目标 } } 目标 目标 您可以对用户的order属性使用sort，并从计算的getter返回该属性：

computed: {
  sortedUsers: {
    get: function() {
      return this.users.sort((a, b) => {
        return a.order > b.order ? 1 : (a.order < b.order ? -1 : 0)
      })
    }
  }
}

---

然后更新组件以使用此getter而不是纯数据对象。

多亏了

我仍然使用computed属性，因为我不需要在再次渲染后对数据进行排序，而且据我所知，方法更适合于单击事件之类的事情

因为我在对象中有对象，所以我必须稍微重新构造数据以使排序工作

const userGoals={ 阿伦：{ 订单：1， 目标：[学习JavaScript，学习VueJS，学习反应。] }, 卢卡斯：{ 订单：2， 目标：[学习画画，造独木舟，画画。] }, 科尔：{ 订单：3， 目标：[学习JavaScript，学习绘画，学习空手道。] }, 塔希尔：{ 订单：0， 目标：[举起重物，举起更重的东西，放松。] } } Vue.组件“目标列表”{ 道具：{ 用户：对象 }, 模板：` {{user.order}{{user.key} {{goal}} `, 计算：{ 分拣机{ 返回Object.keysthis.users .mapi=>{ this.$setthis.users[i]，'key'，i 返回此。用户[i] }.sorta，b=>{ 返回a.order>b.order？1:a.order这有助于我找到正确的方向，最终我找到了解决方案。