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

我也有相同的问题，并且尝试Antoine时没有运气。

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

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

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

$nextTick已使用
在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 2

遇到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>

Answer 3

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

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

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

3 个答案: