vue.js - Vue/Vuetify - 在 中显示 v-select 文本值

Question

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

Answer 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"
/>