VueJS在自定义组件中进行Vee验证

1 回答

• 0

  您可以在子组件中使用父 $validator .

  请参阅子组件中的 created() hook：

  Children.vue

  <template>
    <div>
      <div class="input-group">
        <input
            type="text"
            :name="name"
            :value="value"
            @input="handleInput"
            :maxlength="maxlength"
            :placeholder="placeholder"
            v-validate="validate"
            :class="{'is-danger': $errors.has(name), 'form-control' : true}"
        >
  
        Errors: {{ $errors }}
        <span class="input-group-addon">
          {{ maxlength - counter }}
        </span>
  
        <span v-show="$errors.has(name)" class="text-danger m-t-xs">
          {{ $errors.first(name) }}
        </span>
      </div>
    </div>
  </template>
  
  <script>
    export default {
      name: 'Temp',
  
      props: ['maxlength', 'minlength', 'placeholder', 'validate', 'value', 'name'],
  
      data: () => ({
        counter: 0
      }),
  
      methods: {
        handleInput (event) {
          this.$emit('input', event.target.value)
          this.counter = event.target.value.length
        }
      },
  
      created () {
        this.$validator = this.$parent.$validator
      }
    }
  </script>
  

  Parent.vue

  <children
      maxlength="20"
      minlength="3"
      placeholder="works"
      validate="required|numeric"
      v-model="dataItem.teste"
      name="teste"
  ></children>
  

  ---

  有2个更好的支持解决方案，但您需要在 Parent.vue 组件中移动 <span> 并进行验证，因为 errors / $validator 将在 Children.vue 组件中可用 NOT .

  另外，我是 not 能够在同一表单中使用相同名称的多个输入组件，但您可以查看它们并测试它：

  Solution 1

  你可以使用Vue的provide/inject API：

  Children.vue

  export default {
    inject: ['$validator'],
    // ...
  }
  

  Solution 2

  使用VeeValidate的constructor options：

  Children.vue

  export default {
    $_veeValidate: {
      // value getter
      value () {
        return this.value
      },
      // component name getter
      name () {
        return 'children'
      }
    }
    // ...
  }
  

  回复于 2024-05-03T13:28:05+08:00