vue.js - 无法从父组件验证子组件

Question

我有一个选择框组件。我想在其他组件中重用它。我可以通过在自定义输入组件上添加 v-model 指令来重用其他组件中的选择框组件，但无法使用 vuetify 验证规则从其他组件中验证选择框组件。

测试.vue

  <v-form ref="form" class="mx-4" v-model="valid">
  <Selectbox :name="ward_no"  :validationRule="required()" v-model="test.ward_no"/>   
  <v-btn primary  v-on:click="save" class="primary">Submit</v-btn>              

export default {
  data() {
    return { 
    test: {
     ward_no: ''
         },
    valid: false,
    required(propertyType) {
        return v => (v && v.length > 0) || `${propertyType} is required`;
      },
};
}

选择框.vue

 <select  @change="$emit('input', $event.target.value)" >
      <option
        v-for="opt in options"
        :key="opt.value"
        :value="opt.value"
        :selected="value === opt.value"
      >
      {{errorMessage}}
        {{ opt.label || "No label" }}
      </option>
    </select>

export default {
  props: {
    label: {
      type: String,
      required: true
    },
    validationRule: {
        type: String,
        default: 'text',
        validate: (val) => {
        // we only cover these types in our input components.
        return['requred'].indexOf(val) !== -1;
      }  
    },
    name: {
        type: String  
    },
    value: {
      type: String,
      required: true
    }
  },
  data() {
    return {
        errorMessage: '',
      option: "lorem",
      options: [
        { label: "lorem", value: "lorem" },
        { label: "ipsum", value: "ipsum" }
      ]
    };
  },

methods:{
    checkValidationRule(){
        if(this.validationRule!="")
        {
           return  this.validationRule.split('|').filter(function(item) {
            return item();
            })
           // this.errorMessage!= ""?this.errorMessage + " | ":"";
        }
    },
    required() {
        this.errorMessage!= ""?this.errorMessage + " | ":"";
        this.errorMessage += name+" is required";       
      },      
}
};

标签： vue.jsvuetify.js