我有多个v-autocomplete组件来自Vuetify.当前,例如,如果在搜索输入中输入"Cali"并选中"California"值,则"Cali"值仍存在于搜索输入中.我需要清除输入的值.对于current,关闭下拉列表时搜索值已清除,但我需要在选中复选框时清除它.

<v-autocomplete
        v-model="select"
        :loading="loading"
        :items="items"
        :search-input.sync="search"
        cache-items
        class="mx-3"
        flat
        hide-no-data
        hide-details
        label="What state are you from?"
        solo-inverted
        multiple
      ></v-autocomplete>
new Vue({
  el: '#app',
  data () {
    return {
      loading: false,
      items: [],
      search: null,
      select: null,
      states: [
        'Alabama',
        'Alaska',
        'American Samoa',
        'Arizona',
        'Arkansas',
        'California',
        'Colorado',
        'Connecticut',
        'Delaware',
        'District of Columbia',
        'Federated States of Micronesia',
        'Florida',
        'Georgia',
        'Guam',
        'Hawaii',
        'Idaho',
        'Illinois',
        'Indiana',
        'Iowa',
        'Kansas',
        'Kentucky',
        'Louisiana',
        'Maine',
        'Marshall Islands',
        'Maryland',
        'Massachusetts',
        'Michigan',
        'Minnesota',
        'Mississippi',
        'Missouri',
        'Montana',
        'Nebraska',
        'Nevada',
        'New Hampshire',
        'New Jersey',
        'New Mexico',
        'New York',
        'North Carolina',
        'North Dakota',
        'Northern Mariana Islands',
        'Ohio',
        'Oklahoma',
        'Oregon',
        'Palau',
        'Pennsylvania',
        'Puerto Rico',
        'Rhode Island',
        'South Carolina',
        'South Dakota',
        'Tennessee',
        'Texas',
        'Utah',
        'Vermont',
        'Virgin Island',
        'Virginia',
        'Washington',
        'West Virginia',
        'Wisconsin',
        'Wyoming'
      ]
    }
  },
  watch: {
    search (val) {

      val && val !== this.select && this.querySelections(val)
    }
  },
  methods: {
    querySelections (v) {

      this.loading = true
      // Simulated ajax query
      setTimeout(() => {
        this.items = this.states.filter(e => {
          return (e || '').toLowerCase().indexOf((v || '').toLowerCase()) > -1
        })
        this.loading = false
      }, 500)
    }
  }
})

在下拉列表中 Select 值后,我想清除搜索输入中的值.

推荐答案

为 Select 值和重置search-input添加观察者:

watch: {
  select() {
    this.search = ''
  }

Or react on one of the events:
<v-autocomplete @input="search = ''"
or
<v-autocomplete @change="search = ''"


Watch select because of v-model value (<v-autocomplete v-model="select"), and change
this.search because of search-input.sync value (:search-input.sync="search").

Vue.js相关问答推荐

在移动版本中使用标准的 v-data-table

Vuetify/Nuxt 生产环境组件在开发环境中无法正常工作

如何在 vue.js 构建中重命名 index.html?

使用 vee-validate 在 vue js 中进行验证有错误

Vuetify 容器不会填充高度

在 SPA VueJS 中全局声明 mapState 和 mapMutations

如何使用 laravel-mix 将 bootstrap-vue 加载到 Laravel 5 中?

如何从 .vue 文件中导出多个对象

如果我观看解构的props,Vue 3 手表将无法正常工作

即使在客户端设置 Access-Control-Allow-Origin 或其他 Access-Control-Allow-* 标头后也出现 CORS 错误

SassError:媒体查询表达式必须以(开头

如何打破 vue.js 中的 v-for 循环?

为 webpack HMR Vue.js 包含来自外部项目文件夹的可导入模块

是否可以从 vue-devtools 中排除 vue 事件和 vuex Mutations?

单击时交换组件

使用 Vue 的点击编辑文本字段

Vuex Mutation 正在运行,但组件在 vue 开发工具中手动提交之前不会更新

Vuetify 离线文档

如何将props传递给组件的故事?

如何在 VeeValidate 中自定义错误信息(字段名称)?