Vuetify 양식 검증 재설정

Vuetify 양식 검증 재설정

v-dialog에서 vuetify validation을 재설정하는 데 문제가 있음.

이 코데펜은 내가 가지고 있는 것의 간결한 버전이다.
https://codepen.io/yuukive/pen/BVqpEZ

만약 내가 한다면, 위의 코드를 가지고

(Open dialog --> SAVE button --> (Validation failed) --> CLOSE button --> Open dialog again)

내가 다시 대화 상자를 열었을 때 그것은 이미 유효하다...

사용자가 두 번째 열기 전에 유효성 검사를 재설정할 수 있는가?

new Vue({
  el: '#app',
  data: () => ({
    dialog: false,
    emailRules: [v => !!v || 'Name is required']
  }),
  methods: {
    onSave() {
      if (!this.$refs.form.validate()) return
      dialog = false
    }
  }
})

<div id="app">
  <v-app id="inspire">
    <v-layout row justify-center>
      <v-dialog v-model="dialog" persistent max-width="500px">
        <v-btn slot="activator" color="primary" dark>Open Dialog</v-btn>
        <v-card>
          <v-card-title>
            <span class="headline">Email</span>
          </v-card-title>
          <v-form ref="form">
            <v-card-text>
              <v-container grid-list-md>
                <v-layout wrap>
                  <v-flex xs12>
                    <v-text-field label="Email" required :rules="emailRules"></v-text-field>
                  </v-flex>
                </v-layout>
              </v-container>
              <small>*indicates required field</small>
            </v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" flat @click.native="dialog = false">Close</v-btn>
              <v-btn color="blue darken-1" flat @click.native="onSave">Save</v-btn>
            </v-card-actions>
          </v-form>
        </v-card>
      </v-dialog>
    </v-layout>
  </v-app>
</div>

문서 사용의 예:

this.$refs.form.reset()

참고:reset()유효성 검사를 지우고 입력도 지운다.
이 문제에 따라 이 문제에 대한 추가 업데이트를 확인하십시오.

따라서 대화 상자 값을 보고 양식을 재설정하십시오.

watch: {
    dialog() {
        this.$refs.form.reset()
    }
}

resetValidation()유효성 검사 오류만 삭제함reset()입력 필드도 지운다.

this.$refs.form.reset()에 효과가 있을지도 모른다.JavaScript, 그러나 컴파일러:TypeScript타이핑에 대한 불평비록 그 동안에도serve앱을 망가뜨리지 않고 단말기에서 오류만 보일 뿐, 실제로 고장나려고 할 때build그 앱

새 변수 만들기 및 해당 변수에 할당anytype은 다음과 같은 예에서 트릭을 한다.

const refForm: any = this.$refs.form;
refForm.reset();

참조URL: https://stackoverflow.com/questions/51059402/reset-vuetify-form-validation