Question

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

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

因为 UsersKeyedObject {123199:{name:"John",age:23},...} 无法排序，我创建排序器数组作为 Vue 计算（），并遍历它。如您所见，使用数组部分键看起来太复杂了，所以我正在寻找通过在模板循环内创建变量来简化它的方法。有什么办法吗？

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

如果您需要，请进行一些说明：可变用户KeyedObject

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

计算用户年龄排序器

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

Answer 1

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

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

  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

在 Vue JS 的 v-for 循环中设置一个变量以在同一个循环中使用它

1 个答案: