0

我希望事情是这样的： :user 变量被创建，然后用作 {{user.name}}

<li v-for="(id,index) in computedUsersAgeSorter" :user="UsersKeyedObject[id[0]]">{{user.name}}</li>

因为 UsersKeyedObject {123199:{name:"John",age:23},...} 无法排序，所以我将排序器数组创建为 Vue computed()，并对其进行迭代。如您所见，使用数组部分键看起来太复杂了，所以我正在寻找通过在模板循环中创建变量来简化它的方法。有没有可能？

PS 从 UsersKeyedObject 创建完整数据数组会使用户列表无反应，所以这是不好的方法。

如果需要，请进行一些说明：Mutable UsersKeyedObject

{1431535:{name:"John",age:23},253262:{name:"Anna", age:96}}

计算用户年龄排序器

[[1431535,23],[253262,96]]
4

1 回答 1

0

您可以将每个对象推入一个数组并像这样使用它们：

对数组进行排序（可能有一种更简洁的方法）：

  computed: {
    sortedArr(){
      const objEntries = Object.entries(this.my_data);
      const merged = objEntries.map(item => {
        return { id : item[0], ...item[1]}
      })
      merged.sort((a,b)=> a.age < b.age)
      
      return merged;
    }
  }

在模板中使用它：

    <div v-for="(item, index) in sortedArr" :key="index">
      <p><span>ID: {{item.id}}</span> <span>Age:{{item.age}}</span></p>

https://codepen.io/timfranklin/pen/YzVYQPe

于 2021-07-25T23:58:33.227 回答