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>

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

但我的 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>

Vue.js / Algolia - Dynamically pass field names in template