6

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

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

我也试过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)
      },
    }
  }
})
input.raw {
  border: solid;
}

.is-invalid {
  border-color: #FF5252 !important;
}
<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>

4

2 回答 2

0

在您的示例中，您使用的是oninputHTMLonblur属性，但在 Vue 中，您应该使用@input( v-on:input) 和@blur( v-on:blur) 绑定。有关详细信息，请参阅文档。

用 Vue 绑定替换 HTML 属性使您的示例正常工作：

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)
      },
    }
  }
})
input.raw {
  border: solid;
}

.is-invalid {
  border-color: #FF5252 !important;
}
<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%"
              @input="$v.form.firstName.$touch()"
              @blur="$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>

于 2020-10-07T05:52:12.217 回答
-1

这是来自 Vuelidate 的问题，它们必须被修复，在这个位置你不能重置表单并给出相同的（坏的）行为，你可以通过路由器重新渲染

// re render component for reset all fileds
this.$router.go(0)
于 2020-06-20T07:52:13.523 回答