Vee-Validate проверяет только одно поле

Я использую vuejs 2 и использую vee-validate 2.0.0-beta.18 для проверки. Но столкнулся с проблемой, когда я вызвал this.$validator.validateAll(), он проверяет только одно поле. Это jsfiddle.

Это html:

<body>
  <div id="app">
    <form @submit.prevent="submitForm">
      <label>Email</label>
      <input type="text" placeholder="Email" class="form-control" 
          v-model="email" name="email"
          v-validate data-vv-rules="required|email">
      <p v-if="errors.has('email')" class="text-danger">{{ errors.first('email') }}</p>

      <label>Name</label>
      <input type="text" placeholder="Name" class="form-control" 
          v-model="name" name="name"
          v-validate data-vv-rules="required">
      <p v-if="errors.has('name')" class="text-danger">{{ errors.first('name') }}</p>

      <label>City</label>
      <select class="form-control" 
          v-model="city" name="city" 
          v-validate data-vv-rules="required">
        <option value="">-- Select One --</option>
        <option value="c.id" v-for="c in cities">{{ c.name }}</option>
      </select>
      <p v-if="errors.has('city')" class="text-danger">{{ errors.first('city') }}</p>

      <button>Submit</button>
    </form>

    <pre>{{ errors }}</pre>
    <pre>{{ fields }}</pre>

  </div>
</body>

А это js:

Vue.use(VeeValidate);

new Vue({
  el: '#app',
  data: {
    cities: [{
      id: 1,
      name: 'Jakarta'
    }, {
      id: 2,
      name: 'Depok'
    }],
    name: '',
    city: '',
    email: ''
  },
  methods: {
    submitForm: function() {
      this.$validator.validateAll().then(function(success) {
        if (!success) return;

        alert("All good")
      })
    }
  }
})

Почему проверяется только поле электронной почты?


person Hendra Setiawan    schedule 08.01.2017    source источник
comment
Когда я открыл код в jsfiddle по ссылке, указанной выше, я обнаружил, что проверка работает, как и ожидалось, в jsfiddle. Кажется, проверка работает должным образом, когда вы начинаете взаимодействовать с элементами пользовательского интерфейса. Не могли бы вы подробнее рассказать о конкретной проблеме?   -  person sharnol    schedule 13.01.2017
comment
Я получил ваш вопрос. Он не работает, когда вы загружаете страницу и нажимаете «Отправить».   -  person sharnol    schedule 13.01.2017


Ответы (1)


В приведенном выше html-коде, когда я изменил директивы отображения ошибок с "v-if" на "v-show", он начинает работать. Вот рабочий пример в JsFiddle.

В соответствии с Руководством по документу VueJs ниже приведено сравнение между "v-if" и "v-show".

v-if ленив: если условие ложно при начальном рендеринге, он ничего не сделает — условный блок не будет рендериться, пока условие не станет истинным в первый раз.

Для сравнения, v-show намного проще — элемент всегда отображается независимо от начального состояния, с простым переключением на основе CSS.

person sharnol    schedule 13.01.2017
comment
Отлично @saty! теперь это работает. Не думал, что v-if в сообщении об ошибке может привести к тому, что vee-validate перестанет работать. Я думал, что единственными необходимыми вещами являются атрибуты v-validate и data-vv-rules в элементе ввода, как указано в примере . В нем говорилось: Все, что вам нужно, это добавить директиву v-validate к входным данным, которые вы хотите проверить. - person Hendra Setiawan; 23.01.2017
comment
@HendraSetiawan Я рад, что ответил на твой вопрос. - person sharnol; 24.01.2017