Question

我正在使用Vee验证（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>

不幸的是，如果我输入的不是数字，则不会显示任何错误。并且：父组件上的提交方法不会阻止提交。

感谢您的所有评论：-）

Answer 1

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

QRcodes

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

对动态自定义组件进行V验证

1 个答案: