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

【问题标题】：How to use prismic group fields as items in a vuetify v-select element?如何使用棱镜组字段作为 vuetify v-select 元素中的项目？
【发布时间】：2019-12-23 04:22:46
【问题描述】：

我在 prismic 中创建了一个字段组 (question_topics)，其中包含一个键文本字段 (topic)，用于根据需要添加任意数量的主题。我已经能够成功地将内容放到我的网站上，但我不知道如何在 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 道具中？

【问题讨论】：

标签： vue.js vuetify.js v-select prismic.io

【解决方案1】：

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

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>

【讨论】：