【问题标题】:VeeValidate 'required_if:' ruleVeeValidate 'required_if:' 规则
【发布时间】:2019-08-04 05:54:13
【问题描述】:

我使用了来自文档的语法规则required_ifvee-validate required_if rule 并不起作用。

有人能指出我正确的方向吗? 在我继续之前,我需要这个简单的 required_if 规则。

JSfiddle:

Vue.use(VeeValidate)

new Vue({
  el: '#app',
  data() {
    return {
      first: '',
      last: '',
    }
  },
  methods: {
    onSubmit() {
      this.$validator.validateAll()
        .then(result => {
          console.log(this)
          alert(result)
        })
    }
  }
})
@import url('https://unpkg.com/semantic-ui-css@2.2.9/semantic.css');
span.error {
  color: #9F3A38;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vee-validate@2.0.0-beta.25"></script>

<div id="app">
  <form class="ui form" @submit.prevent="onSubmit">
    <div class="field" :class="{error: errors.has('first')}">
      <label>Name</label>
      <input ref="firstName" type="text" name="first" placeholder="first" v-model="first">
      <span class="error" v-if="errors.has('first')">{{errors.first('first')}}</span>
    </div>
    <div class="field" :class="{error: errors.has('last')}">
      <label>Email</label>
      <input type="text" name="last" placeholder="last" v-validate="'required_if:firstName,test'" v-model="last">
      <span class="error" v-if="errors.has('last')">{{errors.first('last')}}</span>
    </div>
    <button type="submit" class="ui submit button">Submit</button>
  </form>
</div>

【问题讨论】:

  • 如果第一个输入已经有值,您是否希望最后一个输入被验证为“必需”?
  • 您使用的是测试版。尝试一个稳定的版本,看看是否能解决这个问题。
  • 我在这个例子中得到了它的工作;-) codesandbox.io/embed/2jx2v734pr?fontsize=14

标签: javascript html vue.js vuejs2 vee-validate


【解决方案1】:

@Randy Casburn 指出了我的正确 - 谢谢!

问题在于版本。我让它在这个例子下工作: my codesandbox

希望它对某人有所帮助;-)

【讨论】:

    猜你喜欢
    • 2019-03-21
    • 1970-01-01
    • 2014-04-15
    • 2020-05-25
    • 2020-04-11
    • 2019-08-02
    • 2017-07-08
    • 1970-01-01
    • 2017-06-13
    相关资源
    最近更新 更多