无法使用无渲染组件实现vuelidate-vue js

如何解决无法使用无渲染组件实现vuelidate-vue js

我想用vuejs创建一个不渲染的表单-我正在使用vuelidate进行表单验证。该表单使用范围限定的插槽来管理模型和控件。

不幸的是，我无法通过无渲染方法来实现对表单验证的验证。任何想法将不胜感激。 下面是我尝试过的。

App.vue

<renderless-form>
  <form @submit.prevent="submit" slot-scope="{ ele,submit }">
     <input type="email" v-model="ele.model.name" />
     <button> Submit </button>
  </form>
</renderless-form>

<script>
import renderlessFrom from "./components/renderless-form.vue";

export default {
  name: "App",components: {
    "renderless-form": renderlessFrom
  }
};
</script>

renderless-form.vue

import { required,minLength,between } from "vuelidate/lib/validators";
export default {
    data() {
      return {
        model: {
          name: ''
        }
      };
    },validation: model,//i am sceptical here how to put validation
    methods: {
      async submit() {
        console.log(this.model) 
      },},render() {
      return this.$scopedSlots.default({
        // Data
        ele: this.model,// Methods
        submit: this.submit,});
    },};   

解决方法

也许本文可以回答您的问题 https://medium.com/@crishellco/vuelidate-displaying-errors-simplified-156147b123d6

这建议您将输入包装在FormGroup组件中，该组件将显示作用域内的插槽值“无效”和“错误”。

演示：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

https://codesandbox.io/s/vue-template-forked-w86yq?file=/src/components/Form.vue

,

renderlessForm缺少validation定义，并且el.model引用不存在。

查看有效的fiddle

父母标记：

<div id="app">
  <renderless-form>
    <form @submit.prevent="submit" slot-scope="{ model,submit,validations }">
      <input type="email" v-model="model.name" />
      <button> Submit </button>

      <pre>{{ validations.model }}</pre>
    </form>
  </renderless-form>
</div>

非渲染表单组件：

Vue.component('renderless-form',{
  render: function(createElement) {
    return this.$scopedSlots.default({
      model: this.model,submit: this.submit,validations: this.$v
    });
  },data: function() {
    return {
      model: {
        name: ''
      }
    };
  },validations: {
    model: {
      name: {
        required,minLength: minLength(5)
      }
    }
  },methods: {
    submit: function() {
        console.log("submit",this.model);
    }
  }
});