VueJS - How can I have multiple v-slots?

Question

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"
    }
});

Do you see the classes added to the DOM elements? It looks like you've configured it to use is-valid and is-invalid as class names but then you've got valid and invalid in your CSS. — skirtle
@skirtle it's exactly like the documentation. But I changed it and it still won't work. — Mike Ottink
In the dom the :class says touched dirty is-invalid validated changed — Mike Ottink
If you copy the code exactly from the documentation it won't work. It is demonstrating multiple different scenarios. This is explained in the text between the examples. If you are seeing is-invalid on the DOM element (as it seems you are) then that means you've configured a custom CSS class. You need to update the CSS selector to match the classes you have configured. — skirtle

Ja9ad335h Ja9ad335h · Accepted Answer · 2019-10-15T16:56:11

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>

VueJS - How can I have multiple v-slots?

1 Answers