0

Vee 在常见错误框中使用自定义消息验证动态元素。

如果存在验证错误,我需要在页面顶部单独显示错误消息并在输入字段上显示突出显示。如何检查组件中发生的任何验证错误。

我想将它创建为组件,保存按钮位于主页上,并在保存之前验证每个组件。

<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>

4

1 回答 1

3

您可以在第一个 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>

于 2018-05-21T13:25:10.980 回答