Vuetify：item-text 属性破坏了 v-combobox

Question

我才刚刚开始使用 Vue.js 和 Vuetify，我有一个关于 v-combobox 组件的非常简单的问题：

比方说，我想显示一个提供三个不同选项的组合框。以下示例工作正常 (Codepen A):

<div id="app">
  <v-app>
    <v-container fluid>
          <v-combobox
              v-model="selectedItem"
              :items="items"
              item-text="label"
              label="Item"
              filled
          ></v-combobox>
    </v-container>
  </v-app>
</div>

const myVue = new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      selectedItem: null,
      items: [
        {id: 1, label: "one"},
        {id: 2, label: "two"},
        {id: 3, label: "three"}
      ]
    };
  }
});

现在，假设我想更改 item-text 属性以执行稍微复杂一点的转换 (Codepen B)：

<v-combobox
    :item-text="item => item.label.toUpperCase()"
    ...
></v-combobox>

现在，所有建议都以大写字母显示，但 selecting 一个只在第一次尝试时有效。之后不可能select一个不同的选项。

我真的不明白这里有什么问题。我错过了什么？

Answer 1

v-model 可以通过更改选项进行限制

使用 :value 应该可以完成工作

<div id="app">
  <v-app>
    <v-container fluid>
          <v-combobox
              :value="selectedItem"
              :items="items"
              :item-text="item => item.label.toUpperCase()"
              label="Item"
              filled
          ></v-combobox>
    </v-container>
  </v-app>
</div>

Vuetify：item-text 属性破坏了 v-combobox

Vuetify: item-text attribute breaks v-combobox

javascript

vue.js

vuetify.js