使用 vuetify 自动完成选择后清除搜索框

Question

我正在尝试使用vuetify autocomplete 组件，但我不知道如何在选择项目后清除搜索框。我尝试使用输入事件来清除 v-model 中绑定的模型，虽然它在我第一次选择项目时确实有效，但之后搜索框并没有被清除。

//App.Vue
<v-autocomplete
      // Other stuff
      v-model="model"
      :search-input.sync="searchInput"
      v-on:input="addClass">
    </v-autocomplete>\

// methods
addClass (a) { 
  this.model = ""
}

Answer 1

要实现这一点，您需要在change 事件上将searchInput 变量设置为空字符串。你的代码看起来像这样，

// App.Vue
<v-autocomplete
      // Other stuff
      v-model="model"
      :search-input.sync="searchInput"
      @change="searchInput=''"
></v-autocomplete>

Answer 2

我也有同样的问题，并尝试Antoine 回答但没有运气。

在我的环境中检查了Vue插件，问题似乎是由事件顺序引起的。

在<VAutocomplete> 发出的事件change 之后，还有另一个事件update:search-input 也由<VAutocomplete> 发出，从有效负载看来，它似乎将值设置为您刚刚在change 事件中清除的值等等看起来您无法清除该值。

经过多次尝试，我设法提取了一个可行的代码，您可以在下面找到示例，该代码基于 Antoine 解决方案并进行了一些更改：

1. $nextTick 已使用
2. 在search-input 变量之上，同时清除绑定到v-model 的变量

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    
    data: () => ({
      searchResult: null,
      searchString: '',
      items: ['one', 'two', 'three'],
      selected: '',
    }),
    
    methods: {
      itemChange(e) {
        this.selected = e;
        this.$nextTick(() => {
          this.searchString = '';
          this.searchResult = null;
        });
      },
    },
  })
  
Vue.config.productionTip = false
Vue.config.devtools = false

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  
<div id="app">
  <v-app>
    <v-content>
      <v-container>

        <v-autocomplete
          v-model="searchResult"
          :items="items"
          :search-input.sync="searchString"
          label="Search..."
          clearable
          @change="itemChange"
        ></v-autocomplete>
        <div>{{ `Selected: ${selected}` }}</div>

      </v-container>
    </v-content>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

Answer 3

v-combobox 遇到了同样的问题，并找到了一个简单的解决方案。没有测试过v-autocomplete，但猜想这个解决方案也可以。

对于v-combobox 组件，重置组件的lazySearch 值。一个示例如下所示：

<v-combobox
  ref="el"
  :items="items"
  chips
  clearable
  deletable-chips
  multiple
  outlined
  @change="reset"
></v-combobox>

<script>
export default {
  methods: {
    reset() {
      this.$refs.el.lazySearch = ''
    }
}
</script>