Vee-Validate

Test vee validate with select

by RomainMazB

HTML

<script src="https://unpkg.com/vee-validate@latest"></script>
<div id="app">
  <button @click.prevent="names.push({id: 'new', name: 'name'})">Add</button>
  <template v-if="names.length">

    <ValidationObserver v-slot="{ valid }" ref="nameVObserver">

      <ValidationProvider rules="url" v-for="(name, index) in names" :key="index" :ref="'validation'+index" v-slot="{ errors }" name="Name">

        <input type="text" expanded v-model.lazy="name.url" />
        <span class="is-danger">{{ errors[0] }}</span>

      </ValidationProvider>

    </ValidationObserver>

  </template>
</div>

JavaScript

Vue.use(VeeValidate);

import ValidationProvider from 'VeeValidate';
import ValidationObserver from 'VeeValidate';

new Vue({
  components: { ValidationProvider, ValidationObserver },
  el: '#app',
  data: {
    names: [{id: 'new', name: 'name'}, {id: 'new', name: 'name'}]
  }
})