Question

我创建了一个棱柱形的字段组（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"
>

但是，这样做是为我输入到仪表板中的每个字段（而不是实际字段值）填充[选择对象]的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

您只需要为item-text设置item-value或v-select属性，这取决于您想要的视觉部分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>

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

1 个答案: