时间戳

首页 > 解决方案 > 如何使用 v-for 遍历元素

javascript - 如何使用 v-for 遍历元素

问题描述

在对 API 响应进行一些初始迭代后，我在控制台中返回了 48 个对象作为item. 我将其传递给 Vue 数据作为nameModules.

迭代代码如下：

    for (const item of result.application.modules.module.moduleItem) {
    console.log(item)

      let returnedNames = item;
      this.nameModules = returnedNames;
    }

Vue数据：

  data: function() {
    return {
      nameModules: []
}
}

当我像下面这样使用 v-for 时，我只得到id最后一个元素加上四个空的DIVs

      <div v-for="nameModule in nameModules" :key="nameModule._attributes" class="col-12">
        <h1>{{ nameModule.id }}</h1>
        <p class="no-mar-bot">
          Hier finden Sie alle SGUM- zertifizierten Kurse. Nutzen Sie die Suchfunktionen.
          Details finden Sie in der Auswahl der Treffer.
        </p>
      </div>

我尝试了许多不同的组合来渲染ID每 48 个元素中的一个，并进一步渲染name位于 array 中的那个dataField[].value._text，但没有运气。任何帮助都会很棒。

这就是它在控制台中的外观。

console.log(item)给出 48 个对象：

v-for1

我正在尝试获取和的红色id值_text

v-for1

这就是它的渲染方式。只有id最后一个对象和空 DIV。

v-for1

控制台返回两个 Vue 警告

[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

和

[Vue warn]: Duplicate keys detected: '[object Object]'. This may cause an update error.

但这对我最终确定我想要实现的目标没有多大帮助。

更新

我已经取得了一些进展，并在控制台中返回了名称，如下面的屏幕所示。

v-for1

我用这个代码来拥有它

    for (const item of result.application.modules.module.moduleItem) {
    let returnedNames = item.dataField.value._text;
    this.nameModules = returnedNames;

    }

但我仍然无法通过 v-for 渲染它。当我使用下面的代码时，屏幕上的每个元素都有空 div。

      <div v-for="(nameModule, index) in nameModules" :key="index" class="col-12">
        <h1>{{ nameModule._text }}</h1>
        <p class="no-mar-bot">
          Hier finden Sie alle SGUM- zertifizierten Kurse. Nutzen Sie die Suchfunktionen.
          Details finden Sie in der Auswahl der Treffer.
        </p>
      </div>

v-for1

标签： javascriptloopsvue.jsvuejs2v-for

解决方案

您正在使用一个对象作为您的密钥，这导致了错误。由于该key值始终应为字符串，因此每次看到一个对象时，它将替换该循环中的最后一项（用 key [object Object]，因为它是非原始值），而您只会看到一个。

如果您希望更改项目，请考虑使用nameModule._attributes.id作为您的密钥。

<div v-for="nameModule in nameModules" :key="nameModule._attributes.id" class="col-12">

请注意，如果您没有_attributes附加到这些模块之一，它将隐藏整个循环。

您还可以使用循环的索引：

<div v-for="(nameModule, index) in nameModules" class="col-12">

只要您不与循环中的任何元素进行交互，就可以使用索引。但是，如果你是，那么建议不要这样做。

推荐阅读