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 массив действительно имеет значения:

И я также вижу результаты из Алголии:

Но это не показывает результаты.

Если я отредактирую код и жестко закодирую имя поля, которое я хочу показать, например:

<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>