Vue Js + Vee 验证将参数传递给子组件答案

【问题标题】：Vuejs + VeeValidate passing paramets to child componentVue Js + Vee 验证将参数传递给子组件
【发布时间】：2018-11-23 03:43:13
【问题描述】：

我创建了一个名为 Month 的组件，我在其中传递了一些道具：

<template>
  <select :id="id" :name="id" :class="extraClasses" :v-validate="{required: req}">
    <option v-if="def" selected disabled :value="null">{{def}}</option>
    <option v-if="!def" selected disabled :value="null">Month</option>
    <option v-for="(month, index) in months" :key="index" :value="pad(index)">{{month}}</option>
  </select>
</template>

如果我用以下方式调用它们，它们都可以正常工作：

<Month id="dob_month" extraClasses="month" def="Initial month" />

但是，当我尝试通过验证部分时，VeeValidate 似乎忽略了它：

<Month id="dob_month" req="true" />

有没有一种方法可以在不使用消息总线的情况下将验证传递给子级，以便我可以在父级中执行类似的操作：

<fieldset id="dob" :class="{'has-error': errors.has('dob_day') || errors.has('dob_month') || errors.has('dob_year') }">
  <legend class="a-required">Date of Birth</legend>
  <input type="hidden" id="date_of_birth" name="date_of_birth" />
  <select id="dob_day" name="dob_day" v-validate="'required'">
    <option selected disabled value="">Day</option>
    <option v-for="day in monthDays" :key="day" :value="day">{{day}}</option>
  </select>
  <Month id="dob_month" req=true />
  <Year id="dob_year" req="true" />
</fieldset>

或者我无法在父子之间正确填充/传播错误？

【问题讨论】：

不清楚你传递了什么，什么不工作
对不起，我在父组件中传递给子组件的是<Month id="dob_month" req="true" />，而子组件有：<select :id="id" :name="id" :class="extraClasses" :v-validate="{required: req}"> 但是它似乎并没有真正关注 req 属性

标签： vuejs2 vee-validate

【解决方案1】：

您不需要使用 : 进行 v-validate。它的值已经插入到 vee-validate 中。像这样的东西应该可以工作：

  <select :id="id" :name="id" :class="extraClasses" v-validate="{required: req}">

请参阅此 codepen，例如使用 min 规则和局部变量 https://codepen.io/aldarund/pen/LrmaKz

【讨论】：

谢谢！这么小的变化