本文介绍了选择项目后自动清除选择字段的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在选择项目后调用的方法afterselection"中,我找不到清除选择字段的方法:

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

模板:

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

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

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

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

推荐答案

仅供参考,可以用

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

重要的是nextTick"!否则它不会被渲染...

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

查看 vuetify-dev 提供的这个 codepen:工作代码笔

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

这篇关于选择项目后自动清除选择字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-23 16:40