Работа с компонентами в форме Vue + Element-UI
Форма:
<el-form ref="form" :model="form" :rules="rules" label-width="140px">
<input-name @name='getName' />
</el-form>
В methods:
getName(data) {
this.form['name'] = data.name;
}
InputName.vue:
<template>
<el-form-item label="Название:" prop="name">
<el-input v-model="name" @input="updateName"></el-input>
</el-form-item>
</template>
<script>
export default {
name: "InputName",
data () {
return {
name: ''
}
},
props: ["value"],
methods: {
updateName() {
this.$emit('name', {
name: this.name
})
}
}
};
</script>
Оно работает, но является ли мое решение лучшей практикой?
Также есть вопрос касательно rules в element-ui. Вот так выглядит проверка на значение полученное выше, и она тоже работает.
rules: {
name: [
{
required: true,
message: "Введите название",
trigger: "blur"
}
]
}
Но где найти подробнее об этих правилах? Element-UI направляет нас к async-validator. Но там нет ничего схожего с тем, что можно найти в примерах element-ui. Или здесь доступна проверка только на min max и required?