Использую 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',
},
[
}
}
}