Как на vue js реализовать валидацию используя element-ui?

Question

[Алексей Чернышов]

Добрый день столкнулся с такой задачкой:
При клике на кнопку срабатывает метод submitForm в файл from.vue, но валидацию не проходит.

Подскажите пожалуйста как реализовать данную задачу?

Пример данных валидации хоронящиеся в переменной rules:
rules: {
title: [{min: 3, max: 5, message: "Length should be 3 to 5"}]
}

Использую библиотеку element.eleme.io/#/en-US/component/form

index.html

...
<vue-form>
    <vue-form-input></vue-form-input>
    <vue-form-button></vue-form-button>
</vue-form>
...

app.js

import Vue       from 'vue'
import ElementUI from 'element-ui';
import locale    from 'element-ui/lib/locale/lang/en';
import Form  from './components/formfields';

Vue.use(ElementUI, { locale });
Vue.use(Form);

const app = new Vue({
    el: '#app'
})

файл /components/formfields/form.vue

<template>
    <el-form label-width="120px"
        :model="ruleForm" 
        :rules="rules"
        ref="ruleForm"
    >
        <slot></slot>
    </el-form>
</template>


<script>
export default {
    name: 'VueForm',
    props: [
        'formMethod',
        'formAction',
    ],
    data() {
        return {
            ruleForm: {},
            rules: {}
        }
    },
    provide(){
        return {
            fieldsForm: this.ruleForm,
            addFormRules: this.addFormRules,
            submitForm: this.submitForm,
            resetFrom: this.resetFrom,
        }
    },
    methods: {
      
        submitForm(formName) {
            console.log('ruleForm', this.ruleForm);
            console.log('rules', this.rules);

            console.log(this.$refs[formName]);
            this.$refs[formName].validate((valid) => {
            if (valid) {
                alert('submit!');
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },

        addFormRules (ruleForm, rules) {
            this.ruleForm[ruleForm.key] = ruleForm.value;
            this.rules[ruleForm.key] = rules;
        }
    }
}
</script>

файл /components/formfields/form-text.vue

<template>
    <el-form-item :label="dataLabel" :prop="dataRow.field">
        <el-input v-model="fieldsForm[dataRow.field]"></el-input>
    </el-form-item>
</template>


<script>
export default {
    name: 'VueFormText',
    data () {
        return {
            input: ''
        }
    },
    inject: [ 'fieldsForm', 'addFormRules' ],
    props: [
        'dataRow',
        'dataLabel',
        'dataValue'
    ],
    created () { 
        let rules = [];
        if(this.dataRow.details && this.dataRow.details.validation) {
            rules = this.dataRow.details.validation
        }
        
        this.addFormRules(
            { 'key': this.dataRow.field, 'value': this.dataValue },
            rules
        );
    },
}
</script>

Answer 1

[Алексей Чернышов]

Используя метод научного тыка, обнаружил ошибку в файл /components/formfields/form.vue
Текущий метод

addFormRules (ruleForm, rules) {
        this.ruleForm[ruleForm.key] = ruleForm.value;
        this.rules[ruleForm.key] = rules;
}

addFormRules (ruleForm, rules) {
        // this.ruleForm[ruleForm.key] = ruleForm.value; УДАЛИЛ эту сточку и все заработало
        this.rules[ruleForm.key] = rules;
}

Не понял с чем это связано, может быть кто то сможет подсказать?