Ви проверить в динамическом элементе - PullRequest
Новая
       7

Ви проверить в динамическом элементе

0 голосов
/ 21 мая 2018

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>

1 Ответ

0 голосов
/ 21 мая 2018

Вы можете добавить еще один цикл в первый 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>
...