Vue / Vuetify - 在 <span> 中显示 v-select 文本值答案

【问题标题】：Vue / Vuetify - Display v-select text value in a <span>Vue / Vuetify - 在 <span> 中显示 v-select 文本值
【发布时间】：2020-03-13 10:09:33
【问题描述】：

如何在<span> 中显示v-select 的文本？我正在尝试创建一个可打印的报告，但我无法提取所有 item-text 值。我也有多个v-select 使用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: [],
  }
 }
}

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

在您的情况下，所选项目存储在 value 中，因为这是您在 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) 
  }
}

由于您指定了item-value="id"，您将获得id。如果您只需要data_name，则可以指定item-value="data_name" 开头。然后您将文本存储在value 中而无需执行任何操作：

<span>{{ value }}</span>

<v-select
  v-model="value"
  :items="data"
  item-text="data_name" 
  item-value="data_name"
/>

【讨论】：