如何使用v-for遍历元素

Question

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

下面的迭代代码：

    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>

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

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

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

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

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

控制台返回两个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.

但这对我完成最终目标没有太大帮助。

更新

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

我用这段代码来拥有它

    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>

Answer 1

您正在使用对象作为密钥，这会导致错误。由于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">

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