워치 핸들러 vuejs의 데이터 변수에 액세스할 수 없음

워치 핸들러 vuejs의 데이터 변수에 액세스할 수 없음

VueJs 컴포넌트의 입력 필드에 대한 워치 핸들러 함수의 데이터 변수를 설정하려고 합니다.이런 게 있어요.

data() {
    return {
        params: {
            // default params to 1 month
            from: new Date().setMonth(new Date().getMonth() - 1),
            to: Date.now(),
            skip: 0,
            limit: 100
        }
    }
}
watch: {
    dates: { 
        handler: date => {
            console.log(this.params)
            if (date.start) {
                this.params.from = moment(date.start, "YYYY/MM/DD")
            }
            if (date.end) {
                this.params.to = moment(date.end, "YYYY/MM/DD")
            }
        },
        deep: true
    }
}

에 대한 입력을 설정할 때dates뷰 템플릿의 변수, I get a variable,undefined위해서this.params콘솔 로그에서, 에러를 표시하려고 하면 에러가 발생합니다.this.params.from그래서 다음 방법으로 접속을 시도했습니다.

methods: {
    printParams() {
        console.log(this.params)
    }
}

뷰 템플릿에서 호출하면 이 템플릿이 올바르게 해결됩니다.params물건.

내가 뭘 빠트렸나요?

추가 바인딩을 방지하려면 여기서 화살표 함수 구문을 사용하지 마십시오.대신 ES6 오브젝트 속기를 사용합니다.

watch: {
    dates: { 
        handler(date) {
            console.log(this.params)
            if (date.start) {
                this.params.from = moment(date.start, "YYYY/MM/DD")
            }
            if (date.end) {
                this.params.to = moment(date.end, "YYYY/MM/DD")
            }
        },
        deep: true
    }
}

지금이다this는 디폴트로 올바른 컨텍스트에 바인드 됩니다.

이것을 핸들러에 바인드 해 봅시다.

        handler(date) {
            console.log(this.params)
            if (date.start) {
                this.params.from = moment(date.start, "YYYY/MM/DD")
            }
            if (date.end) {
                this.params.to = moment(date.end, "YYYY/MM/DD")
            }
        }.bind(this)

언급URL : https://stackoverflow.com/questions/43651090/cant-access-data-variables-in-watch-handler-vuejs