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

Question

我正在尝试根据一组名称动态显示来自阿尔及利亚的搜索结果。

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>