Как можно проверить несколько полей с одинаковым именем с помощью vee-validate 4?

Как можно провалидировать инпуты, расположенные в цикле v-for, с использованием vee-validate во Vue?
  • 24 мая 2024 г. 15:31
Ответы на вопрос 1
Для проверки нескольких полей с одинаковым именем с помощью vee-validate 4, можно воспользоваться атрибутом "vid" для каждого инпута, чтобы уникально идентифицировать их. Например:

```html
<template>
  <div>
    <input v-model="email" v-validate="'required|email'" :vid="'email1'" type="text" placeholder="Email">
    <p v-show="errors.has(`email${1}`)" class="error">{{ errors.first(`email${1}`) }}</p>

    <input v-model="email" v-validate="'required|email'" :vid="'email2'" type="text" placeholder="Confirm Email">
    <p v-show="errors.has(`email${2}`)" class="error">{{ errors.first(`email${2}`) }}</p>
  </div>
</template>
```

Для провалидации инпутов, расположенных в цикле v-for, можно использовать динамическое вычисление идентификатора внутри директив v-validate. Например:

```html
<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <input v-model="item.value" :name="`item${index}`" v-validate="`required|min:3`" type="text" placeholder="Enter value">
      <p v-show="errors.has(`item${index}`)" class="error">{{ errors.first(`item${index}`) }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { value: '' },
        { value: '' },
        { value: '' }
      ]
    };
  }
}
</script>
```

В данном случае, каждый инпут будет иметь уникальное имя в зависимости от индекса элемента в массиве "items", что позволит провалидировать их с помощью vee-validate.
Похожие вопросы