web-dev-qa-db-fra.com

Vue js: _ceci. $ Emit n’est pas une fonction

J'ai créé un composant Vue appelé imageUpload et passe la propriété en tant que v-model 

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

et dans imgeUpload composant J'ai ce code

<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])
     }
}

et j'ai reçu

Uncaught TypeError: _this. $ Emit n'est pas une fonction 

Merci

vuejs2vue-component
13
Barakat Turki

Ne définissez pas votre méthode avec une grosse flèche. Utilisation:

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

    }
}

Lorsque vous définissez votre méthode avec une grosse flèche, vous capturez la portée lexicale, ce qui signifie que this désignera la portée contenant (souvent window ou undefined) et non pas Vue.

26
Bert

Cette erreur apparaît si $ emit ne se trouve pas dans le contexte/la référence actuelle de this, peut-être lorsque vous utilisez les méthodes then ou catch d'une promesse. Dans ce cas, capturez une référence à this en dehors de la promesse d'utilisation ultérieure afin que l'appel à $emit aboutisse.

<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);
                });
            }
        }
    });

0
Ryan Rodemoyer

Vous pouvez écrire brièvement la méthode en utilisant upload(e) { au lieu de upload:(e)=>{ pour indiquer ce point au composant.

Voici l'exemple complet

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