VuesJS，在 v-for 循环中生成随机密钥

Question

晚上好，

我的问题是：我有一个显示简单 div 的循环。我有一个方法可以指定我的 div 的尺寸（在我的情况下是必需的）。但是，当我通过更改 div 的大小再次调用该方法时，它不起作用，因为没有重新渲染。

为了克服这个问题，我在 my: v-for 的键上生成了一个 guid，其中包含一个变量，例如：

<div v-for="task in tasks" :key="task.id + guid()">...blabla...</div>

是否可以在循环期间直接生成此代码以避免串联？

<div v-for="(task, maVar=guid())  in tasks" :key="maVar">...blabla...</div>

PS：guid()方法的代码：

guid() {
   return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
      (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16))
}

谢谢

Answer 1

您可以创建一个计算属性，该属性返回添加了 guid 的任务数组，或者如果您想保持任务不变，则返回一个包含每个任务和 guid 的对象，

computed: {
  tasksWithGuid: function() {
    return this.tasks.map(task => { return {task, key: task.id + guid() } })
  }
}

<div v-for="taskWithGuid in tasksWithGuid" :key="taskWithGuid.key">
  {{taskWithGuid.task.someProperty}}
</div>