vue.js 在v-for中定义变量有什么问题吗？

dsekswqp 于 2023-01-31 发布在 Vue.js

关注(0)|答案(1)|浏览(313)

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

<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。看起来你可以用这种方法定义几个局部变量。
你认为这种技术有什么副作用或风险吗？我发现这种方法是最方便和干净的，但由于这显然不是预期的用途，它可能不是未来的证明。
编辑：
下面是另一个pen，它更好地演示了这个用例，虽然这里我们在一个地方只引用了一个计算属性，但是如果属性和引用的数量增加，就会导致代码冗长。

vue.js

来源：https://stackoverflow.com/questions/75241103/any-problems-with-defining-variables-inside-v-for

1条答案

按热度按时间

ars1skjm1#

总的来说，我认为最简单的方法是将数据转换成一种格式，这样就可以循环使用，而不需要额外的步骤，这样就不需要在v-for中使用那些额外的变量。
来自codepen的示例可能如下所示：

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从提供的字符串解析和构建表达式的方式，我非常肯定它不会被删除，如果您和您的同事对它感到满意（并准备像刚才一样一遍又一遍地听到上面的内容），无论如何，去做吧。

赞(0）回复(0）举报 2023-01-31

我来回答

vue.js 在v-for中定义变量有什么问题吗？

1条答案

相关问题

热门标签

最新问答