Vuetify：item-text 属性会破坏 v-combobox答案

【问题标题】：Vuetify: item-text attribute breaks v-comboboxVuetify：item-text 属性会破坏 v-combobox
【发布时间】：2021-10-09 01:30:09
【问题描述】：

我才刚刚开始使用 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>

现在，所有建议都以大写字母显示，但选择一个仅在第一次尝试时有效。之后无法选择其他选项。

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

【问题讨论】：

这似乎是 Vuetify 中的一个错误。你应该提交一个 GitHub 问题。
@Idan 建议的解决方案效果很好。我创建了一个关于 v-model 部分的 GitHub 问题：github.com/vuetifyjs/vuetify/issues/14023

标签： javascript vue.js vuetify.js

【解决方案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>

【讨论】：