选择下拉列表中的复选框后如何清除 v-autocomplete（多个）搜索输入？

Posted 2023-02-22

【中文标题】选择下拉列表中的复选框后如何清除 v-autocomplete（多个）搜索输入？

【英文标题】：How to clear v-autocomplete (multiple) search input after selecting the checkbox in the drop-down list?

【发布时间】：2019-09-12 11:40:11

【问题描述】：

我有多个来自 Vuetify 的 v-autocomplete 组件。目前，例如如果在搜索输入中输入“Cali”并检查“California”值，“Cali”值仍然存在于搜索输入中。我需要清除输入的值。对于当前，关闭下拉列表时清除的搜索值，但是当我选择复选框时需要清除它。

<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)
    
  
)

我想在下拉列表中选择值后清除搜索输入中的值。 这是代码笔示例 - https://codepen.io/anon/pen/ZZMKeL

【参考方案1】：

为选择值添加观察者并重置search-input：

watch: 
  select() 
    this.search = ''
  

或对其中一个事件做出反应：<v-autocomplete @input="search = ''" 或<v-autocomplete @change="search = ''"

---

关注select，因为v-model 值（<v-autocomplete v-model="select"），更改this.search 因为search-input.sync 值（:search-input.sync="search"）。

【讨论】：

谢谢！！！我将 this.search = ' ' 添加到 @change 事件中，它按我的预期工作。

在我的情况下，我必须使用$nextTick，否则它将无法工作。

以防万一其他人尝试，我将搜索设置为null，但它不起作用。必须为空字符串。