clearing select field automatically after selecting item

Question

I can\'t find a way to clear the select field in method \"afterselection\" which is invoked after selecting an item:

template:

Answer 1

Looks like you need to bind to the select a v-model that is a computed property. Then it would be possible to change that value with the @input event.

Answer 2

Just for reference, you can clear a select field in vuetify with

this.$nextTick(() => {
    this.selected = null  
  })

the important thing is the "nextTick"! otherwise it wont be rendered...

see this codepen provided by a vuetify-dev: working codepen

Answer 3

you can achieve this by adding ref to the component

<v-select
  ref="adrlistRef"
  :items="adrlist"
  @input="afterselection"        
></v-select>

then use the reset method of v-select component whenever you want!

afterselection(item) {
  if (item) {
    console.log(item);
    this.$refs['adrlistRef'].reset();
  }
}

Answer 4

I faced with the same issues. I have several v-select components in card text block and clear btn. When i click on clear i run clear func and clear all v-select items by refs.

template:

 <v-card>
  <v-card-title>Filters</v-card-title>
  <v-card-text v-if="selectFilters.length">
    <v-select
      :ref="filter.id"
      v-for="filter in selectFilters"
      :items="filter.items"
      :key="filter.id"
      :label="filter.alias"
      multiple
      return-object
      clearable
      @input="selectChangeHandler($event, filter.id)"
    ></v-select>
  </v-card-text>
  <v-card-actions>
    <v-btn color="primary" @click="clear">Clear</v-btn>
  </v-card-actions>
</v-card>

script:

methods: { 
  ...
  clear: function() {
    Object.values(this.$refs).forEach(ref => {
      const vueSelect = ref[0];
      vueSelect.internalValue = [];
    });
  },
}