【问题标题】:Vee-Validate with scope not working on vuetify范围不适用于 vuetify 的 Vee-Validate
【发布时间】:2018-10-08 23:56:46
【问题描述】:

我一直在尝试在Veutify 表单上使用vee-validate 和范围。但是当提交表单时,它不会显示任何错误或表单始终有效。

我想我在实施过程中遗漏了一些东西。

请帮忙。

<div id="app">
  <v-app id="inspire">
    <form  data-vv-scope="form1">
      <v-text-field
        v-model="name"
        label="Name"
        :counter="10"
        :error-messages="errors.collect('form1.name')"
        v-validate="'required|max:10'"
        data-vv-name="name"
        required
      ></v-text-field>
      <v-btn @click.native="submit('form1')">submit</v-btn>
      <v-btn @click="clear">clear</v-btn>
    </form>
  </v-app>
</div>

提交方法:

submit(scope) {
  alert("submit");
  this.$validator.validateAll(scope).then(result => {
    if (result) {
    }
  });
}

Sample Code

【问题讨论】:

标签: vuetify.js vee-validate


【解决方案1】:

我认为你应该使用 validator.validate('scope.*') 而不是 $validator.validateAll('scope');

你可以参考这个链接 https://vee-validate.logaretm.com/v2/api/validator.html#methods

【讨论】:

    【解决方案2】:

    这在文档中并不明显, https://baianat.github.io/vee-validate/examples/scopes.html,或从提供的示例中, https://codesandbox.io/s/y3504yr0l1?from-embed,尤其是在 Vuetify 中使用时。

    当你定义 data-vv-name 时,它​​需要以范围为前缀。

    data-vv-name="form1.name"
    

    【讨论】:

      猜你喜欢
      • 2019-01-30
      • 2018-08-08
      • 1970-01-01
      • 2021-04-05
      • 1970-01-01
      • 2018-10-09
      • 1970-01-01
      • 1970-01-01
      • 2021-06-13
      相关资源
      最近更新 更多