0

I need to put some prismic fields into the :items prop of a v-select element but I haven't found a way to do this effectively. I'm not sure if I need to use different field types to accomplish this, but at this point I'm trying to render key text fields (API ID 'topic') that are in a group field (API ID 'question_topics').

I've used the getContent method to retrieve fields in the following ways:

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

And I've converted them into data:

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

Then in my markup I can render out the data:

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

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

If I put fields.question_topics in the :items prop of my v-select element it just repeats [object Object] for each topic field I have. Obviously I want these to be the text for each topic field but I don't know what approach to take and haven't had any success with whatever I've tried up to this point. Does anyone know a solution?

1 Answers1

0

While setting the :items prop to the question_topics array, I had to also set the item-text and item-value for the element to be 'topic'. Doing this rendered all of the topic field values in the v-select properly.

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