@postya

Как сделать валидацию у формы каждого объекта из массива в Element UI?

Использую Element UI для отображения форм во Vue JS.
Имеется массив объектов. Через v-for отображается название объекта, его форма и кнопка по клику на которую должна происходить валидация.
Валидация работает нормально(если в поле оставлю например пустое значение и ткну мышью за предлелами формы, то она отрабатывает)
Проблема в том, что при клике на кнопку, я не могу посмотреть, прошла ли выалидация формы у объекта или нет. То есть не работает кнопка валидации
Вот,что я пытался сделать, но не получилось:

<div class="item" item in items>
<h1>{{item.title}}</h1>
<el-from>
    :ref="item"
    :model="item"
    label-position="top"
     :rules="rules">

 <el-form-item
     label="Название"
     prop="title"
    class="form-item">
         <el-input
          v-model="item.title"
          placeholder="Введите название"/>
 </el-form-item>
</el-form>

 <el-button
        type="primary"
        class="btn-item"
        @click.prevent="validateItem(item)">
       Проверить
</el-button>
</div>

async validateItem(formName) {
       try {
        if (await this.$refs[formName].validate()) {
         console.log('success')
        }
      } catch (e) {}
    },


data() {
    return {
    items: [
   {title: 'Title 1'},
   {title: 'Title 2} 
],
rules: {
title: [
         {
            required: true,
            message: 'Введите название',
            trigger: 'blur',
          },
   [
}
  }
}
  • Вопрос задан
  • 103 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы