如何在 Vuetify.js 中控制选择框的选择？答案

【问题标题】：How to control select box's choices in Vuetify.js?如何在 Vuetify.js 中控制选择框的选择？
【发布时间】：2020-08-28 04:58:02
【问题描述】：

我在工作中使用 Vuetify.js，我的框架是 Nuxt.js 和 Typescript。当我选择一个时，我想更改选择框选项。所以我尝试在下面制作测试代码。如果我在选择框中选择某个状态，状态将显示到文本字段。然后我在选择框中再次选择其他状态，我只选择不选择。这意味着如果我选择状态，下次选择的状态不会显示在选择框中。我不知道如何创建这种功能。有人可以给我建议吗？我的示例用 codepen 编写并检查了操作。

    <div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-row align="center">
        <v-col cols="6">
          <v-subheader>Custom items</v-subheader>
        </v-col>
  
        <v-col cols="6">
          <v-select
            v-model="select"
            :hint="`${select.state}, ${select.abbr}`"
            :items="items"
            item-text="state"
            item-value="abbr"
            label="Select"
            persistent-hint
            return-object
            single-line
          ></v-select>
          <v-text-field v-model="select.state"></v-text-field>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

    new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      select: { state: 'Florida', abbr: 'FL' },
      items: [
        { state: 'Florida', abbr: 'FL' },
        { state: 'Georgia', abbr: 'GA' },
        { state: 'Nebraska', abbr: 'NE' },
        { state: 'California', abbr: 'CA' },
        { state: 'New York', abbr: 'NY' },
      ],
    }
  },
})

【问题讨论】：

标签： javascript vue.js vuetify.js nuxt.js

【解决方案1】：

您不必创建任何功能。请看Vuetify select documentation on API

在道具部分你会发现道具 hide-selected 它实际上做了你想要达到的目标

【讨论】：