使用 v-for 循环遍历对象数组以输出特定字段的值

Question

我有两个objects/model:

export class AObject {
  public anumber: string;
}


export class BObject {
  public aObject: AObject[];
}

在我的模板中，我想遍历 AObject[] 数组，并为每个数组输出属性 anumber 的值。我尝试了以下操作，但它不起作用：

           <div class="fields fields-flex">
              <div class="field">
                <label>{{ $t('myLabel.aLabel') }}</label>
                <span v-for="(aObject) in aObjects" 
                  :key="aObject.number"> 
                  {{bObject.aObjects.number}}"</span>
              </div>
            </div>

你能帮忙吗？

谢谢！

Answer 1

如果您将 aObject[] 作为数组，那么您的循环应该类似于

<span v-for="aObjectInstance in aObject" 
 :key="aObjectInstance.anumber"> 
</span>

aObject是数组名，所以aObject应该在in.

之后

此外，你应该有 v-for 来遍历所有 BObject.aObject，你不能像 {{bObject.aObjects.number}}" 那样引用它，因为你没有 aObjects BObject 但 aObject *.

所以应该是这样的：

<span v-for="aObject in BObject.aObject" 
 :key="aObject.anumber">
 {{aObject.number}}"
</span>

希望对您有所帮助。

使用 v-for 循环遍历对象数组以输出特定字段的值

Usage of v-for for looping through an array of objects in order to output a specific field's value

vue.js

v-for