Vue JS，在 v-for 循环中生成随机键答案

【问题标题】：VuesJS, generate randomkey in v-for loopVue JS，在 v-for 循环中生成随机键
【发布时间】：2018-07-12 05:10:39
【问题描述】：

晚上好，

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

为了克服这个问题，我在 v-for 的 my: 键上生成了一个 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))
}

谢谢

【问题讨论】：

请提供您的tasks 数据的简化版本，以及指定 div 维度的方法以及如何将维度应用于 div。如果不了解维度的应用方式或数据的初始化或变异方式，我们将无法真正做任何事情。此外，您的 guid() 方法可能应该被丢弃。您正在生成新的随机值（可能有冲突）。相反，如果您不更改元素的顺序，请考虑使用 v-for="(task, task_index) in tasks" :key="task_index"，或者为每个元素指定一个 id 字段以用于 :key="task.id"。
看起来您在每个 task 中都有一个 id 字段。你为什么不把它用作key？如果它在任务中是独一无二的，那是最佳实践。
如何更改 div 的大小？您需要注意“Vuejs 中的反应性”：有关 Vue.JS 如何检测对象更改的信息，请参阅本文：vuejs.org/v2/guide/reactivity.html
1.在我的模板中，一个简单的循环带有 v-for="t in tasks" style="width:t.width = 'px'" 2. 我不能使用索引，因为如果 :ref 没有变化，就没有重新为任务渲染。

标签： vue.js vuejs2

【解决方案1】：

我喜欢这个

function randomKey() {
   return (new Date()).getTime() + Math.floor(Math.random() * 10000).toString()
}

【讨论】：

【解决方案2】：

下面显示了一种更简单、更简洁的技术。它避免了用冗余属性污染迭代对象。当您迭代的对象中没有唯一属性时，可以使用它。

首先在您的视图模型中添加生成随机数的方法（例如，使用 Lodash random）

var random = require('lodash.random');

methods: {
    random() {
        return random(1000);
    }
}

然后在您的模板中显示v-for 中的索引，并使用您在视图模型中的random() 方法通过连接将其随机化到v-bind:key。

<div v-for="(task, index) in tasks" v-bind:key="index + random()">
    // Some markup
</div>

这很简单。

但是请注意，这种方法会强制重新绘制列表中的每个项目，而不是仅替换不同的项目。这将为未更改的项目重置先前绘制的状态（如果有）。

【讨论】：

【解决方案3】：

您可以创建一个计算属性，该属性返回一个添加了 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>

【讨论】：

然而，这两种解决方案都不是添加代码，而是在调整大小的方法中将“guid”属性添加到任务中。感谢您的帮助。