CODEWITHSUNDEEP
vue.jsvuetify.js
matt
matt

Reputation: 2039

Vuetify: How to clear Autocomplete field using a button

I have an autocomplete field that I want to be able to clear from a button. However, if something has been selected and/or there are chips in the field, they do not clear even if the the v-model has been set to null. Is there a clean way for this to be done?

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

Upvotes: 1

Views: 2248

Answers (1)

tony19
tony19

Reputation: 138206

The component has a reset() method that clears the input along with the model.

Use a template ref on the v-autocomplete to get a reference to it via this.$refs, and call its reset() method:

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

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

demo

Upvotes: 3

Related Questions