Vue js : _이것.$syslog는 함수가 아닙니다.

Vue js : _이것.$syslog는 함수가 아닙니다.

Vue 구성 요소 call imageUpload 및 v-model로 속성 전달을 생성했습니다.

<image-upload v-model="form.image"></image-upload>

그리고 그 안에서imgeUpload컴포넌트 이 코드가 있습니다.

<input type="file" accept="images/*" class="file-input" @change="upload">

upload:(e)=>{

    const files = e.target.files;
    if(files && files.length > 0){
        console.log(files[0])
        this.$emit('input',files[0])
     }
}    

그리고 나는 받았다.

Uncaughed Type Error: _이것.$syslog는 함수가 아닙니다.

감사해요.

굵은 화살표로 방법을 정의하지 마십시오.용도:

upload: function(e){
    const files = e.target.files;
    if(files && files.length > 0){
        console.log(files[0])
        this.$emit('input',files[0])

    }
} 

굵은 화살표로 메서드를 정의하면 어휘 범위를 캡처합니다.즉,this포함 범위를 가리킵니다(종종window, 또는undefinedVue가 아닙니다.

이 오류는 $emit이 현재 컨텍스트/참조 목록에 없는 경우 표면화됩니다.this(아마도 당신이 에 있을 때)then또는catch약속의 방법이 경우 다음 참조를 캡처합니다.this그 때 사용한다는 약속에서 벗어나서$emit성공했습니다.

<script type="text/javascript">
var Actions = Vue.component('action-history-component', {
        template: '#action-history-component',
        props: ['accrual'],
        methods: {
            deleteAction: function(accrualActionId) {
                var self = this;
                axios.post('/graphql',
                    {
                        query:
                            "mutation($accrualId: ID!, $accrualActionId: String!) { deleteAccrualAction(accrualId: $accrualId, accrualActionId: $accrualActionId) { accrualId accrualRate name startingDate lastModified hourlyRate isHeart isArchived minHours maxHours rows { rowId currentAccrual accrualDate hoursUsed actions { actionDate amount note dateCreated } } actions {accrualActionId accrualAction actionDate amount note dateCreated }} }",
                        variables: {
                            accrualId: this.accrual.accrualId,
                            accrualActionId: accrualActionId
                        }
                    }).then(function(res) {
                    if (res.data.errors) {
                        console.log(res);
                        alert('errors');
                    } else {
                        self.$emit('accrualUpdated', res.data.data.deleteAccrualAction);
                    }
                }).catch(function(err) {
                    console.log(err);
                });
            }
        }
    });

간단히 말하면 다음과 같은 방법으로 방법을 작성할 수 있습니다.upload(e) {대신upload:(e)=>{컴포넌트에 이 점을 강조합니다.

여기 전체 예가 있습니다.

watch: {
    upload(e) {
        const files = e.target.files;
        if(files && files.length > 0) {
            console.log(files[0]);
            this.$emit('input',files[0]);
        }
    }
}

언급URL : https://stackoverflow.com/questions/43073797/vue-js-this-emit-is-not-a-function