vue.js - 动态元素中的 Vee 验证

Question

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>

标签： vue.jsvee-validate

Answer 1

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