如何使用 prismic 组字段作为 vuetify v-select 元素中的项目？

Question

我在 prismic 中创建了一个字段组 (question_topics)，其中包含一个关键文本字段（主题），以便根据需要添加尽可能多的主题。我已经能够成功地将内容放到我的网站上，但我不知道如何在 v-select 元素的 :items 属性中获取字段数据。

通常，对于组字段，我在循环遍历每个字段以呈现数据以执行此类操作的实例中使用它们...

<v-expansion-panel v-for="(item, index) in fields.question_topics" :key="index">
  <v-expansion-panel-content>
    <template slot="header">
      <v-card-title class="py-4">
        <h4>{{item.topic}}</h4>
      </v-card-title>
    </template>
  </v-expansion-panel-content>
</v-expansion-panel>

但现在我正在尝试做这样的事情...

<v-select 
 :items="fields.question_topics"
>

但这样做会为我在仪表板中输入的每个字段使用 [object OBJECT] 填充 v-select 字段，而不是实际字段值。

<v-select 
  :items="fields.question_topics.topic"
>

这根本不会创建任何数据。

我可以渲染字段 {{fields.question_topics}} 并且我得到这个数组：

[{ "topic": "First topic" }, { "topic": "Second topic" }, { "topic": "Third topic" }]

有谁能解释如何将这些主题值放入 v-select 元素 :items 属性中？

Answer 1

您只需要为 v-select 设置 item-text 或 item-value 属性，具体取决于您想要什么 item-text 用于视觉部分，item-value 用于值 bidden 到选项....这里是给定数组的示例：

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      arr: [{
        "topic": "First topic"
      }, {
        "topic": "Second topic"
      }, {
        "topic": "Third topic"
      }]
    }
  }
})

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-content>
      <v-select :items="arr"
                item-value="topic"
                item-text="topic"
                label="Select a topic"
      ></v-select>
    </v-content>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

如何使用 prismic 组字段作为 vuetify v-select 元素中的项目？

How to use prismic group fields as items in a vuetify v-select element?

vue.js

prismic.io

vuetify.js

v-select