选择项目后自动清除选择字段

Question

在选择项目后调用的方法“afterselection”中，我找不到清除选择字段的方法：

模板：

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

选择中的数据：

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

vue 代码：

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

这是一个带有此示例的代码笔：
codepen example

我尝试将 v-model 设置为 null，但这不起作用。

我研究了好几天了，实在找不到解决办法：-/

Answer 1

您可以通过向组件添加 ref 来实现此目的

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

然后随时使用v-select 组件的reset 方法！

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

Answer 2

仅供参考，你可以在vuetify中清除一个选择字段

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

重要的是“nextTick”！否则不会渲染...

查看 vuetify-dev 提供的这个 codepen： working codepen

Answer 3

我也遇到了同样的问题。我在卡片文本块中有几个 v-select 组件并清除 btn。当我点击 clear 时，我运行 clear func 并通过 refs 清除所有 v-select 项目。

模板：

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

脚本：

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

Answer 4

看起来您需要绑定到选择一个作为计算属性的 v-model。然后可以使用@input 事件更改该值。