VueJS - 我怎样才能有多个 v-slots？答案

【问题标题】：VueJS - How can I have multiple v-slots?VueJS - 我怎样才能有多个 v-slots？
【发布时间】：2020-02-12 08:52:44
【问题描述】：

我正在使用 vee-validate v3.0 进行验证，并且设置进行得很顺利，但现在我正在尝试设置元素的样式，但似乎无法使其正常工作。我遵循了关于样式的非常简短的文档并编辑了 vee-validate 配置，但我注意到 v-slot 现在已更改为类。这让我很困惑，因为 v-slot 已经用于错误，我可以使用多个吗？我希望输入字段使用 input.valid 和 input.invalid。

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

Vue 注册组件中的表单

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

【问题讨论】：

您看到添加到 DOM 元素中的类了吗？看起来您已将其配置为使用 is-valid 和 is-invalid 作为类名，但您的 CSS 中有 valid 和 invalid。
@skirtle 它与文档完全一样。但是我改了还是不行。
在 dom 中 :class 说touched dirty is-invalidvalidated changed
如果您从文档中完全复制代码，它将无法正常工作。它展示了多种不同的场景。这在示例之间的文本中进行了解释。如果您在 DOM 元素上看到 is-invalid（看起来确实如此），那么这意味着您已经配置了一个自定义 CSS 类。您需要更新 CSS 选择器以匹配您已配置的类。

标签： javascript vue.js vee-validate

【解决方案1】：

您可以使用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;
}

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

【讨论】：