vuetify.js - 选择项目后自动清除选择字段

标签 vuetify.js

我找不到一种方法来清除选择项目后调用的方法“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,但这不起作用。

我已经研究并尝试了几天,但我真的找不到解决方案:-/

最佳答案

仅供引用,您可以使用以下命令清除 vuetify 中的选择字段

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

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

请参阅 vuetify-dev 提供的此代码笔:
working codepen

关于vuetify.js - 选择项目后自动清除选择字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48869649/

相关文章:

html - Vuetify嵌套数据表列宽问题

css - Vuetify.js - 如何在 v-card 中添加横向边框

javascript - 如何使用 Axios 请求的数据填充 Vue 中的数组

vue.js - vue组件: dynamically use router-link or href property

vue.js - Vuetify 没有接受样式更改

javascript - Vue + Vuetify 清除表单时的验证问题

javascript - 在 Vuetify v-dialog 外部单击时如何关闭它,但在 mousedown 事件而不是 mouseup 事件上执行此操作?

css - 如何将 v-btn 放在 v-card 的中心并将其放在卡片边缘?

javascript - 缺少默认作用域插槽 Vuetify

javascript - Vue 中的井号 (#) 是什么意思?