CODEWITHSUNDEEP
javascriptvue.jsvee-validate
anonymous-dev
anonymous-dev

Reputation: 3539

VueJS - How can I have multiple v-slots?

I am using vee-validate v3.0 to do my validation and the setup went well, but now I am trying to style my elements but I can't seem to get it working. I followed the very short documentation about styling and edited the vee-validate config, but I noticed that the v-slot was now changed to classes. This confused me because the v-slot was already used for errors, can I use multiple? I want the input field to use the input.valid and input.invalid.

https://logaretm.github.io/vee-validate/guide/styling.html#classes

Form in Vue Register component

<ValidationProvider rules="required|min" v-slot="{ errors, classes }">
    <input
        v-model="form.username"
        type="text"
        id="username"
        class="fadeIn second"
        :class="classes"
        name="login"
        placeholder="username"
    />
    <span class="form-error">{{ errors[0] }}</span>
</ValidationProvider>

Style in Vue Register component

<style>
input.invalid {
    color: red;
}

input.valid {
    color: green;
}
</style>

Config

import { configure } from "vee-validate";

configure({
    classes: {
        valid: "is-valid",
        invalid: "is-invalid"
    }
});

Upvotes: 3

Views: 4237

Answers (1)

Ja9ad335h
Ja9ad335h

Reputation: 5075

you can use v-slot="{ errors, classes }". it will work

here is a working example

VeeValidate.configure({
  classes: {
    valid: "my-valid",
    invalid: "my-invalid"
  }
});

Vue.component('ValidationProvider', VeeValidate.ValidationProvider);
Vue.component('ValidationObserver', VeeValidate.ValidationObserver);

new Vue({
  el: '#app',
  data() {
    return {
      username: null
    }
  }
});
input.my-invalid {
  background-color: #ff000030;
}

input.my-valid {
  background-color: #00ff0030;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/3.0.5/vee-validate.full.min.js"></script>
<div id="app">
  <validation-observer tag="form" #default="{ dirty, pristine, valid, invalid, errors, validate }">
    <validation-provider name="username" rules="required|min:3" v-slot="{ errors, classes }">
      <input v-model="username" type="text" id="username" class="fadeIn second" :class="classes" name="login" placeholder="username" />
      <span class="form-error">{{ errors[0] }}</span>
    </validation-provider>
    <br>
    <br>
    <button :disabled="!dirty || !valid" type="submit">
      Submit
    </button>
    <button type="button" @click="validate">
      Validate manually
    </button>
    <pre>
      pristine: {{ pristine }}
      dirty:{{ dirty }}
      valid: {{ valid }}
      invalid: {{ invalid }}
      errors:{{ errors }}
    </pre>
  </validation-observer>
</div>

Upvotes: 2

Related Questions