clearing select field automatically after selecting item

问题

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 :-/

回答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

回答2:

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.

回答3:

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

来源：https://stackoverflow.com/questions/48869649/clearing-select-field-automatically-after-selecting-item

标签

vuetify.js