뷰+Vuetify 유효성 검사 문제 폼 식히느라

뷰+Vuetify 유효성 검사 문제 폼 식히느라

나는 앱에 대한 간단한 CRUD 기능 구축이와 저는 둘 다 업데이트를 만들기 위해 re-use 같은 형태를 원합니다.

나의 모델 나는 업데이트하고 있메뉴.

나는 이(만약 더 나은 방법이 있는지 알려 주십시오) 하고 있는 방식은 메서드를 보유하는 것이다.openForm(menu = null)나는 단순한 메뉴에 합격하는 어떤 새로운 버튼과 내가 하는 편집 버튼에 대해

만약 메뉴는 빈 메뉴 개체를 만듭니다가 null입니다 OpenForm 다음을 점검한다.

그리고 이에 저장됩니다.data()menuForForm.

나의 형탠 도구로, 내 폼 렌더링에 사용된다 이 받는다.

나의 문제는 내가 Vuetify를 사용하는 것이다.$refs.form.reset()법 나는 오류 null값과 관련된 전체를 하중 받는 형태를 지웁니다.마치 나는 그들은 ok을 제거해 이 유효성 검사 규칙으로 인한 것 같다.

마치 나는 정상으로 한 형태를 왜 필드 값이 null, 이 문제를 일으킨다 나는 충분히 알 수 없다.data()들판이 fine 일한다.

여기 내 번호는:

부모님 구성 요소

<template>
    <v-flex xs12 sm6 lg4>
        <v_form
            v-if="menuForForm"
            :menu="menuForForm"
            >
        </v_form>
    </v-flex>
</template>

<script>
    data() {
        return {
            menuForForm: null,
            newMenu: {
                id: '',
                label: '',
                url: '',
            },
        }
    },
methods: {
    openMenuForm(menu = null) {
        menu ? this.menuForForm = JSON.parse(JSON.stringify(menu)) : 
        this.menuForForm = this.newMenu;
        this.$store.dispatch('setShowForm', true);
    },
}

</script>

폼 컴포넌트

<template>
    <v-form ref="form" v-model="valid">
        <v-text-field
            v-model="menu.label"
            :rules="labelRules"
            label="Label"
            required
        >
        </v-text-field>
        <v-btn
            color="primary"
            :disabled="!valid"
            @click="submit"
        >
        submit
        </v-btn>
        <v-btn 
              @click="clear"
        >
        clear
        </v-btn>
    </v-form>
</template>

<script>
    data(){
        return{
            valid: true,
            labelRules: [
                v => !!v || 'Name is required',
                v => v.length >= 3 || 'Label must be atleast than 3 characters'
            ], 
        }
    },
    methods:{
        clear() {
            this.$refs.form.reset();
        }
    }

</script>

다음은 클릭해서 클리어하는 오류입니다.

[Vue warn]: Error in callback for watcher "value": "TypeError: Cannot read property 'length' of null"

found in

---> <VTextField>



[Vue warn]: Error in nextTick: "TypeError: Cannot read property 'length' of null"

found in

---> <VTextField>


TypeError: Cannot read property 'length' of null
    at labelRules (Form.vue?c13f:61)

왜 이런 일이 일어나는지 아는 사람 있나요? 몇 시간 동안 계속 이 일을 하고 있어서 미치겠어요.

규칙은 다음과 같아야 합니다.

data(){
    return{
        valid: true,
        labelRules: [
            v => !!v || 'Name is required',
            v => (v && v.length >= 3) || 'Label must be atleast than 3 characters'
        ], 
    }
}

왜냐하면 재설정 시 폼은 값을 다음과 같이 설정하기 때문입니다.null

데모: https://codepen.io/ittus/pen/KRGKdK

언급URL : https://stackoverflow.com/questions/50366713/vue-vuetify-validation-issue-when-clearing-form