Vuetify：如何使用按钮清除自动完成字段

Question

我有一个自动完成字段，我希望能够通过按钮将其清除。但是，如果选择了 and/or 字段中有 chips，即使 v-model 已设置为 null，它们也不会清除。有没有一种干净的方法可以做到这一点？

<v-autocomplete
    v-model="contract"
    item-value="id"
    item-text="name"
    :items="items"
    dense
    outlined
    clearable
    chips
    deletable-chips
    small-chips
    multiple
/>

Answer 1

该组件有一个 reset() 方法可以清除模型中的输入。

使用 template ref on the v-autocomplete to get a reference to it via this.$refs，并调用其 reset() 方法：

<v-autocomplete ref="input">...</v-autocomplete>
<v-btn @click="clearInput">Reset</v-btn>

export default {
  methods: {
    clearInput() {
      this.$refs.input.reset()
    }
  }
}

demo

Vuetify：如何使用按钮清除自动完成字段

Vuetify: How to clear Autocomplete field using a button

vue.js

vuetify.js