CODEWITHSUNDEEP
vue.jsvee-validate
Jerin Mathew George
Jerin Mathew George

Reputation: 13

Vee validate in dynamic element

Vee Validate dynamic element with custom mesage in common error box.

I need to show the error message seperatly in the top of the page and show highlights on the input filed if the validation error is present. How to check any validation error is occured in the component.

I want to create it as a componets, The save button is on the main page and validate each of the component before save.

<div>Need to show the error mesage here.</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>

Upvotes: 0

Views: 4394

Answers (1)

Sovalina
Sovalina

Reputation: 5609

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/[email protected]"></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>

Upvotes: 3

Related Questions