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:

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

data in select:

const addressList = [{
"text":"Street 523, 2533",
"value":[1723455.7054408004,5923451.382843224]},
{"text":"Lala 3, 3455",
"value":[1723455.7054408004,5923451.382843224],
}]

vue-code:

new Vue({
  el: '#app',
  data () {
    return {
      adrlist: addressList,
    }
  },
  methods:{
    afterselection(item){
      console.log(item);
      //here I want to clear the select
    },
  },
})

Here's a code pen with this example:
codepen example

I've tried to set the v-model to null, but this is not working.

I have researched and tried for several days now, and I really can't find a solution :-/

Answer 1

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 2

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 = [];
    });
  },
}

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();
  }
}