Vue.js 在 vfor 中定义变量有什么问题吗

发布于01月28日

AFAIK，首先由弗拉基米尔·米洛舍维奇展示here

 <div
    v-for="( id, index, user=usersData[id], doubleId=doubleThat(id) ) in users"
    :key="id"> 
    {{ user.name }}, {{ user.age }} years old And DoubleId = {{ doubleId }}
  </div>

我给他加了codepen美元.看起来您可以通过这种方式定义循环局部的几个变量.

你认为这项技术有什么副作用或风险吗？我发现这种方式是最方便和最干净的，但由于这显然不是预期的用途，它可能不是future 的证明.

编辑:

下面是另外pen个，它更好地演示了用例.虽然在这里我们只在一个位置引用一个计算(computed)属性，但如果属性和引用的数量增加，将导致冗长的代码.

推荐答案

总的来说，我认为做你想做的事情的干净方法是将数据转换成一种格式，在这种格式中，你可以循环它而不需要额外的步骤.这样，您将永远不需要v-for中的那些额外变量.

来自您的代码的示例可能如下所示:

const app = new Vue({
  el: '#app',
  data: {
    years: [2024, 2025, 2120],
    usersData: {...}
  },
  computed: {
    // user objects for each year
    ageData() {
      return Object.fromEntries(this.years.map(year => [year, 
        Object.values(this.usersData).map(user => this.userInYear(user, year))
      ] ))
    }
  },
  methods: {
    userInYear(user, year){
      return {...user, age: user.age + (year - 2023)}
    }
  },
});

现在，您可以在没有中断和恶作剧的情况下迭代它:

<div v-for="(users, year) in ageData" :key="year">
  <b>In {{ year }}:</b>
  <div v-for="user in users" :key="user.name"> 
    {{ user.name }} will be {{ user.age }} years old.
  </div>
</div>

它更易于阅读和更改，而且它还有一个额外的好处，即您可以在控制台中判断ageData.

也就是说，我认为可以在v-for中声明额外的变量是非常有趣的，我假设这是可能的，因为VUE从提供的字符串中解析和构建表达式的方式，我非常确定它不会被删除，如果您和您的同事对它感到满意(并准备像刚才一样一遍又一遍地听到上面的内容)，那么一定要try 一下.