VueJS - Как я могу иметь несколько v-слотов? - PullRequest
Новая
       17

VueJS - Как я могу иметь несколько v-слотов?

2 голосов
/ 15 октября 2019

Я использую vee-validate v3.0 для проверки, и установка прошла успешно, но сейчас я пытаюсь стилизовать свои элементы, но не могу заставить их работать. Я проследил очень короткую документацию по стилю и отредактировал конфигурацию vee-validate, но заметил, что v-слот теперь заменен на классы. Это смутило меня, потому что v-слот уже использовался для ошибок, могу ли я использовать несколько? Я хочу, чтобы в поле ввода использовались input.valid и input.invalid.

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

Форма в компоненте Vue Register 

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

Стиль в компоненте Vue Register 

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

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

Конфиг 

import { configure } from "vee-validate";

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

1 Ответ

0 голосов
/ 15 октября 2019

вы можете использовать v-slot="{ errors, classes }". это будет работать

вот рабочий пример 

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



  
    
      
      {{ errors[0] }}
    
    

    

    
    
    
      pristine: {{ pristine }}
      dirty:{{ dirty }}
      valid: {{ valid }}
      invalid: {{ invalid }}
      errors:{{ errors }}
...