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

Question

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

在我的表单中，“值”字段是一个动态组件，具体取决于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-方法不会阻止提交。

我感谢您的所有评论:-)

Answer 1

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

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

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