时间戳

首页 > 解决方案 > v-select 关闭事件或删除验证错误计时器？

vue.js - v-select 关闭事件或删除验证错误计时器？

问题描述

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

v-select 是否有这样的事件，当它关闭时我可以打开它？或者我可以设置某种“计时器”以在验证错误发生后消除它们？

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

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

我想知道用户何时单击v-select但未选择任何内容。显然，这必须是可能的，因为验证可以对此有所了解。

标签： vue.jsvuejs2vuetify.js

解决方案

使用一个onChange道具来添加你的回调函数，这样你就可以检查v-model分配给v-selectif 是否已更改，以清除验证错误。或者观察v-model分配给v-select的变化。

使用onChange：

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

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() 方法中使用焦点事件，告诉 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

方法

推荐阅读