How do I display the text of a v-select in a <span>? I'm trying to create a printable report and I can't pull-out all the item-text value. I also have multiple v-select using array.push
<span>{{ insert item-text }}</span>
<v-select
v-model="value"
:items="data"
item-text="data_name"
item-value="id"
/>
export default {
data() {
return {
data: [],
value: [],
}
}
}
In your case, selected item is stored in value because that is what you specified in v-model:
<span>{{ selected }}</span>
<v-select
v-model="value"
:items="data"
item-text="data_name"
item-value="id"
/>
data: () => ({
data: [
{id: 0, data_name:'Apples'},
{id: 1, data_name:'Apricots'},
{id: 2, data_name:'Avocado'},
{id: 3, data_name:'Bananas'}
],
value: null,
}),
computed: {
selected () {
return this.data.find(item => item.id === this.value)
}
}
Since you specified item-value="id" you are getting the id. If you only need data_name you can specify item-value="data_name" to begin with. And then you have the text stored in the value without doing anything:
<span>{{ value }}</span>
<v-select
v-model="value"
:items="data"
item-text="data_name"
item-value="data_name"
/>