Vee-validate: How to validate button variable values.

[bernarddoci]

Versions:

• "vue": "^2.4.2",
• "vee-validate": "^2.0.0-rc.27",

Description:

In the example below, I have two gender buttons(male, female). I need your help to explain me how can I use validation based on button's click (gender variable).

Steps To Reproduce:

<div class="green-wrapper">
    <div class="form-group row input-padding">
    <label class="col-12">Gender</label>
    <div class="col-6 col-sm-6">
        <a class="btn btn-outline-light btn-block radio-custom-button" @click="changeGender(0)" >Femër</a>
    </div>
    <div class="col-6 col-sm-6">
           <a class="btn btn-outline-light btn-block radio-custom-button" @click="changeGender(1)" >Mashkull</a>
    </div>
    </div>
</div>

export default{
    data(){
       gender: null
   },
   changeGender(val){
    this.gender = val;
   }
}

[logaretm]

You can use attach to validate a field manually using the validator API like this:

https://jsfiddle.net/logaretm/dcn0vLf4/1/

or you can create an input component that acts as an input:

https://jsfiddle.net/logaretm/5hnty3gx/

[bernarddoci]

Thank you very much Abdelrahman.