将 v-model 与 v-select 一起使用，其中初始 v-model 值不在 items 标记中

Posted 2023-02-22

【中文标题】将 v-model 与 v-select 一起使用，其中初始 v-model 值不在 items 标记中

【英文标题】：Use v-model with v-select, where the initial v-model value is not in items tag

【发布时间】：2020-05-01 02:55:03

【问题描述】：

我想要一个不在 displayNumberList 中的值被预选，但不可选择（也就是不在 displayNumberList 中）。

我发现 v-model 的值必须是 displayNumberList 中的值才能被选中，有没有办法解决这个问题？

<v-select v-model="displayNumber" :items="displayNumberList"></v-select>

这是数据

data() 
    return 
      displayNumber: '12345678'
      displayNumberList: ['11111111','22222222']
    ;
  ,

【参考方案1】：

如果我正确理解了您的问题，您可以使用追加/前置项目槽https://vuetifyjs.com/en/components/selects#prepend-append-item-slots

【参考方案2】：

也许您可以使用占位符：https://codepen.io/luizarusso/pen/KKwBKZj

<v-select
    v-model="model"
    :items="items"
    label="Items"
    placeholder="12345678"
>
</v-select>

new Vue(
  el: '#app',
  vuetify: new Vuetify(),
  data: () => (
    items: ['11111111','22222222'],
  ),
)