Vue.js / Algolia - 在模板中动态传递字段名称

Question

我正在尝试根据一组名称动态显示来自 Algolia 的搜索结果。

Input.vue:

<search-results title="Books" :fields="['booking_reference','shipment_reference']"></search-results>

Results.vue:

<template slot-scope="{ result }">
     <h1 v-for="field in fields">{{ result.field }}</h1>
</template>

但是，上面的代码在我的模板中没有返回任何内容。它只是空白。

但我的fields 数组确实有值：

我也可以看到 Algolia 的结果：

但它没有显示结果。

如果我编辑代码并对要显示的字段名称进行硬编码，如下所示：

<template slot-scope="{ result }">
          {{ result.booking_reference }}
</template>

我可以在我的模板中看到结果。

我做错了什么？

更新：

如何使用多维数组做到这一点？

我的数组：

fields:Array[2]
0:Object
maintitle:"booking_reference"
1:Object
subtitle:"shipment_reference"

我需要能够像这样访问它：

result.maintitle.field

Answer 1

试试

 <h1 v-for="field in fields">{{ result[field] }}</h1>

而不是

 <h1 v-for="field in fields">{{ result.field }}</h1>