[Vuejs]-Vee validate in dynamic element

by

3👍

✅

You can add another loop in the first div:

Vue.use(VeeValidate)
new Vue({
el: "#app",
  data: {
      configurations: [
      	{ assemblyconfigurationname: "name1", assemblyconfigurationvalue: 'value1' },
        { assemblyconfigurationname: "name2", assemblyconfigurationvalue: 'value2' }
      ]
  }
})
.error {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://unpkg.com/vee-validate@2.0.0-beta.25"></script>

<div id="app">
  <div v-for="(items, index) in configurations" class='error'>{{ errors.first('assemblyconfigurationvalue_' + index) }}</div>
  <div id="product">
    <dl v-for="(items, index) in configurations">
      {{items.assemblyconfigurationname}}
      <input type="text" :name="'assemblyconfigurationvalue_' + index" 
             v-validate="'required'" :class="[{ error_input: errors.has('assemblyconfigurationvalue_' + index)}]" v-model="items.assemblyconfigurationvalue">
    </dl>
  </div>
</div>
👤Sovalina

Leave a comment