Question

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

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

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

1 个答案: