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

Question

I created a field group (question_topics) in prismic with a single key-text field (topic) inside of it for adding as many topics as I need. I have been able to get the content on to my site successfully, but I don't know how I can get the field data in the :items prop of a v-select element.

Typically with group fields I have used them in instances where I am looping through each field to render the data to do stuff like this...

<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>

But now I'm trying to do something like this...

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

But doing this populates the v-select field with [object OBJECT] for each field I've entered into my dashboard, not the actual field values.

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

This doesn't create any data at all.

I can just render out the field {{fields.question_topics}} and I get this array:

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

Is anyone able to explain how to get these topic values into the v-select element :items prop?

score 0 · Accepted Answer · answered Aug 17 '19 at 00:58

You just need to set item-text or item-value attributes for v-select depending on what you want item-text for the visual part and item-value for the value bidden to the options .... here is an example of the given array :

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>

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

1 Answers1