将棱镜字段放入数组中以用于 v-select :items prop 用于 vuetify 项目？答案

【问题标题】：Put prismic fields in an array to be used in v-select :items prop for vuetify project?将棱镜字段放入数组中以用于 v-select :items prop 用于 vuetify 项目？
【发布时间】：2019-12-25 03:18:03
【问题描述】：

我需要将一些棱镜字段放入 v-select 元素的 :items 属性中，但我还没有找到有效的方法。我不确定是否需要使用不同的字段类型来完成此操作，但此时我正在尝试呈现组字段（API ID 'question_topics'）中的关键文本字段（API ID 'topic'） .

我使用 getContent 方法通过以下方式检索字段：

this.fields.question_topics = document.data.question_topics;
this.fields.topic1 = document.data.question_topics[0].topic;

我已经将它们转换成数据：

fields: {
  question_topics: [],
  topic1:null,
}

然后在我的标记中我可以渲染出数据：

{{fields.question_topics}} //creates '[{ "topic": "First topic" }, { "topic": "Second topic" }, { "topic": "Third topic" }]'

{{fields.topic1}} //creates 'Topic 1'

如果我将 fields.question_topics 放在我的 v-select 元素的 :items 属性中，它只会为我拥有的每个主题字段重复 [object Object]。显然，我希望这些成为每个主题字段的文本，但我不知道采取什么方法，并且到目前为止我尝试过的任何方法都没有取得任何成功。有谁知道解决办法吗？

【问题讨论】：

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

【解决方案1】：

在将 :items 属性设置为 question_topics 数组时，我还必须将元素的 item-text 和 item-value 设置为“topic”。这样做会正确呈现 v-select 中的所有主题字段值。

<v-select 
:items="fields.question_topics"
item-value="topic"
item-text="topic"
>
</v-select>

【讨论】：