Question

我正在用一个数组填充一个下拉列表，但是我对在v-for中应该使用哪个键感到困惑。

我尝试了多个按键，甚至没有按键。一切似乎都正常，但是最佳实践是什么？

<select class="period-control" v-model="selected">
<option v-for="month in car.months" :key="month.id">{{ month }}</option>
</select>



asyncData(context) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({
          car: [
            {
              id: "1",
              brand: "VW",
              model: "Transporter",
              variant: "Sport",
              thumbnail:
                "http://pluspng.com/img-png/cargo-van-png-van-png-transparent-image-1878.png",
              mprice: "2700",
              dpayment: "5400",
              months: [
                { month: "12 måneder" },
                { month: "24 måneder" },
                { month: "36 måneder" }
              ]
            },
            {
              id: "2",
              brand: "Nissan",
              model: "Tekna",
              variant: "Sport",
              thumbnail:
                "http://pluspng.com/img-png/cargo-van-png-van-png-transparent-image-1878.png",
              mprice: "3000",
              dpayment: "5400",
              months: ["12 måneder", "24 måneder"]
            }
          ].find(el => el.id === context.params.id)
        });
      }, 1500);
    });
  }

Ì没有错误，下拉列表将输出正确的数组。

Answer 1

“最佳做法”要求您使用唯一的密钥。您可以使用数组中每个元素的ID。这样做的原因是，当删除任何一个元素时，它允许vue跟踪dom和虚拟dom之间的所有元素。

作为最后的选择，您还可以使用项目的索引，但是请记住，这可能会导致一些渲染问题，因为vue会发现很难唯一地标识元素并跟踪已删除的元素。 / p>

当Vue更新用v-for渲染的元素列表时，默认情况下它使用“就地补丁”策略。如果数据顺序   项目已更改，而不是移动DOM元素以匹配   项目的顺序，Vue将在适当位置修补每个元素，并确保   它反映了应在该特定索引处呈现的内容。这是   类似于Vue 1.x中track-by =“ $ index”的行为。

此默认模式非常有效，但仅在您的列表中适用   渲染输出不依赖于子组件状态或临时DOM   状态（例如表单输入值）。

给Vue一个提示，以便它可以跟踪每个节点的身份，从而   重用和重新排序现有元素，您需要提供唯一的密钥   每个项目的属性：

请参阅https://vuejs.org/v2/guide/list.html#Maintaining-State

在v-for中使用哪个键

1 个答案: