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

【问题标题】：unable to implement vuelidate with renderless component - vue js无法使用无渲染组件实现 vuelidate - vue js
【发布时间】：2020-08-14 15:26:39
【问题描述】：

我想用 vuejs 创建一个无渲染的表单——我正在使用 vuelidate 进行表单验证。表单使用作用域槽来管理模型和控件。

不幸的是，我无法通过无渲染方法实现表单验证的 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,
      });
    },
  };

【问题讨论】：

请不要破坏您的帖子。通过在 Stack Exchange 网络上发布，您已授予 SE 分发该内容的不可撤销的权利（在 CC-BY-SA 4.0 license 下）。根据 SE 政策，任何破坏行为都将被撤销，随后的尝试将使您被禁止。如果您想取消此帖子与您的帐户的关联，请参阅What is the proper route for a disassociation request?

标签： javascript vue.js vuejs2 vue-component vuelidate

【解决方案1】：

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

它建议您将输入包装在一个 FormGroup 组件中，该组件会公开作用域插槽值“无效”和“错误”。

演示：

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;

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

【讨论】：

【解决方案2】：

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

【讨论】：