Vuelidate 重置特定字段，以便 $error 标志为 false

Question

Vuelidate 重置特定字段，以便 $error 标志为 false

使用 Vuelidate，您可以使用this.$v.$reset(). 在此Codepen 示例中，重置lastName使用 Vuetify 组件的字段有效 -设置为 false$invalid时$error为 true。

重置常规文本输入firstName时不起作用，因为该$error标志仍然为真。如何修改文本输入，以便在调用重置时 $error 为 false？

我也试过，this.$nextTick(() => {...})但这也不起作用。

Vue.use(window.vuelidate.default)
var validationMixin = window.vuelidate.validationMixin
const {
  maxLength,
  required
} = window.validators

new Vue({
  el: '#app',
  mixins: [validationMixin],
  data: () => ({
    form: {
      firstName: '',
      lastName: ''
    }
  }),
  validations: {
    form: {
      firstName: {
        required, maxLength: maxLength(2)
      },
      lastName: {
        required, maxLength: maxLength(2)
      },
    }
  }
})

Run Code Online (Sandbox Code Playgroud)

input.raw {
  border: solid;
}

.is-invalid {
  border-color: #FF5252 !important;
}

Run Code Online (Sandbox Code Playgroud)

<html>
  <head>
    <script src="https://unpkg.com/vuelidate@0.6.1/dist/validators.min.js"></script>
    <script src="https://unpkg.com/vuelidate@0.6.1/dist/vuelidate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  </head>
  <body>
    <div id="app">
            <label for="firstName">First Name</label>
            <input
              v-model="form.firstName"
              id="firstName"
              class="raw"
              :class="{ 'is-invalid': $v.form.firstName.$error }"
              type="text"
              width="100%"
              :oninput="$v.form.firstName.$touch()"
              :onblur="$v.form.firstName.$touch()"
            />
            <button @click="$v.form.firstName.$touch()">
              $touch
            </button>
            <button @click="$v.form.firstName.$reset()">
              $reset
            </button>
            <pre>{{ $v.form.firstName }}</pre>
    </div>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

ham*_*nia -3

这是 Vuelidate 的问题，必须修复它们，在这个位置，您无法重置表单并给出可以由路由器重新渲染的相同（糟糕）行为

// re render component for reset all fileds
this.$router.go(0)

Run Code Online (Sandbox Code Playgroud)

如果这是 Vuelidate 错误，请考虑添加指向相关 Github 问题的链接。 (2认同)

归档时间：	6 年，1 月前
查看次数：	4907 次
最近记录：	5 年，5 月前