0

我在 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 道具中？

4

1 回答 1

0

您只需要根据您想要的视觉部分和选项的值来设置item-text或item-value属性....这是给定数组的示例：v-selectitem-textitem-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>

于 2019-08-17T00:58:52.527 回答