Vee-Validate 只验证一个字段

Question

我正在使用 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")
      })
    }
  }
})

为什么只验证电子邮件字段？

Answer 1

在上面的 html 代码中，当我将错误显示指令从 "v-if" 更改为 "v-show" 然后它开始工作。这是 JsFiddle.

中的工作示例

根据 VueJs Document Guide 下面是 "v-if" 与 "v-show" 之间的比较。

v-if 是惰性的：如果在初始渲染时条件为假，它不会做任何事情 - 在条件第一次变为真之前不会渲染条件块.

相比之下，v-show 简单得多 - 无论初始条件如何，元素始终呈现，只需简单的 CSS-based 切换。

Vee-Validate 只验证一个字段

Vee-Validate only validate one field

javascript

validation

vue.js

vuejs2