Работа с компонентами в форме 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?


Ответы (0 шт):