代码之家 › 专栏 › 技术社区 › Matt Oestreich

v-select on close事件还是删除验证错误计时器?

vuetify.js vuejs2 vue.js

2

Matt Oestreich · 技术社区 · 7 年前

最终编辑/解决方案: https://jsfiddle.net/up9xkhsm/1/

v-select是否有关闭时可以打开的事件?或者某种类型的“计时器”,我可以设置为在验证错误发生后删除它们?

这就是 v-select 我正在使用: https://vuetifyjs.com/en/components/selects

编辑:这概述了问题: https://jsfiddle.net/96vnLm7g/

我想知道用户何时单击 V选择 但没有选择任何内容。显然,这是可能的,因为验证可以解决这个问题。

1 回复 | 直到 7 年前

1

Nikola Kirincic 7 年前

使用一个 onChange 属性添加回调函数,以便检查 v-model 指派给 v-select 如果已更改,则清除验证错误。或观看 V-模型 指派给 V选择 为了改变。

使用 换上 :

  <v-select :options="options" :on-change="cleanUpValidation" v-model="selectModel" name="some-select"></v-select>

在VueJS

methods: {
    cleanUpValidation(){
     //do the cleanup
    }
  }

默认情况下,onchange发出 input 具有所选选项值的事件:

default: function (val) {
        this.$emit('input', val)
    }

因此,您还可以使用它来捕获输入事件:

  <v-select :options="options" @input="cleanUpValidation" v-model="selectModel" name="some-select"></v-select>

在VueJS

 methods: {
    cleanUpValidation(val){
      //do something with selected option value or cleanup error
    }
  }

或者您可以观看分配给 V选择 :

watch: {
    'selectModel' : function(){
      //do the cleanup or something with this.selectModel
    }
  }

有关onchange和其他道具,请参见: https://sagalbot.github.io/vue-select/docs/Api/Props.html

同样的事情也适用于VuetifyJS的v-select。

编辑: 主要目标是在实际单击v-select时清除验证错误。 v-select在其onclick()方法中使用focus event,告诉Vuejs已单击组件,以便可以用于捕获单击事件:

      <v-select
        @input="inputChanged"
        v-on:change="changeChanged"
        label="Select Item"
        :items="myItems"
        required
        :rules="rules.requiredField"
        @focus="focusChanged"
      >
      </v-select>

在JS中:

   methods:{
    focusChanged(){
        console.log('focusChanged ');
    },
   }

最后一个例子: https://jsfiddle.net/c5moqweu/

看到 https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VSelect/VSelect.js

onClick

方法