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

【问题标题】：Set a variable inside a v-for loop on Vue JS to use it in the same loop在 Vue JS 的 v-for 循环中设置一个变量以在同一个循环中使用它
【发布时间】：2021-07-25 09:51:59
【问题描述】：

我希望事情是这样的： :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()，并对其进行迭代。如您所见，使用数组部分键看起来太复杂了，所以我正在寻找通过在模板循环中创建变量来简化它的方法。有没有可能？

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

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

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

computedUsersAgeSorter

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

【问题讨论】：

请提供您拥有的数据示例以及您希望在 UI 中列出的内容。谢谢
这是提取组件的正当理由。
最后我看到没有办法在 v-for 循环中设置变量。因此，从父组件中提取子组件似乎是不太好的提醒中的最佳选择。看来 Vue 组件并不臃肿（它们不是函数），所以子组件必须在父组件之前定义，否则会触发 Uncaught ReferenceError。

标签： javascript vue.js vuejs3

【解决方案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

【讨论】：

这不是一个理想的方式，因为它倾向于在更改源中的单个数据后重新计算整个结构。但是谢谢你的代码。
当然，但是如果您尝试更改嵌套数据而不替换整个对象，您很可能会遇到反应性问题。请务必参考此内容，以确保您的组件在源更改时实际更新。 vuejs.org/v2/guide/reactivity.html