动态自定义组件上的 V-validate

Question

我正在使用 Vee-validate (https://baianat.github.io/vee-validate/) 来验证我的所有表单。现在我想做以下事情：

在我的表单中，"value" 字段是一个动态组件，取决于当前对象的 type。类型可以是integer、string、decimal等

所以如果类型改变，输入也会改变。

我是这样做的：

   <component
     :name="'attribute-value'"
     v-model="attribute.value"
     :is="attribute.type">
   </component>

和

import string from '@/components/fields/String'
import integer from '@/components/fields/Integer'
import decimal from '@/components/fields/Decimal'

export default {
  name: 'edit',
  metaInfo: {
    title: 'Edit'
  },
  components: {
    string, integer, decimal
  },
}

好的 - 每个字段都应该有自己的验证。 integer 字段应该只允许数字。所以我想这样做：

<template>
    <b-input
      :id="name"
      :name="name"
      type="number"
      v-validate="{ required: true, numeric: true }"
      :state="errors.has(name) ? 'invalid' : ''"
      :value="value"
      v-on:input="$emit('input',$event)"/>
</template>
<script>
export default {
    name: 'Integer',
    inject: {
        $validator: '$validator'
    },
    props: ['name', 'value'],

    $_veeValidate: {
        name() {
            return this.name;
        },
        value() {
            return this.value;
        }
    },
}
</script>

不幸的是，如果我输入数字以外的其他内容，则不会显示任何错误。并且：父组件的submit-method不会阻止提交。

感谢您的所有评论:-)

Answer 1

您需要使用 v-bind 而非 v-model 将任何数据传递给组件。另一种方法是，您可以创建一个通用组件，例如 BaseInput ，它将您的输入当前对象作为道具。在 BaseInput 组件中，您可以 select 使用 v-if 的 Integer 或 String 组件，就像这样。

<template v-if="inputCurrentObject.type === 'string' ">
  <Integer :input="inputCurrentObject.value" />
</template>

在您的 BaseInput 中，您可以根据输入类型呈现组件。

动态自定义组件上的 V-validate

V-validate on dynamic custom component

javascript

vue.js

vuejs2

vee-validate