He creado un Vue componente de la llamada imageUpload y pasar de la propiedad como v-modelo de

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

y dentro de imgeUpload componente
Tengo este código

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

y he recibido

Uncaught TypeError: esto.$emiten no es una función

Gracias

3 Comentarios

  1. 29

    No define su método con una grasa de flecha. Uso:

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

    Al definir su método con una grasa de flecha, capturar el ámbito léxico, lo que significa que this se apunta al ámbito de contenido (a menudo window, o undefined), y no Vue.

  2. 1

    Puede escribir el método en el corto utilizando upload(e) { en lugar de upload:(e)=>{ para hacer de este punto para el componente.

    Aquí está el ejemplo completo

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

    Este superficies de error si $emiten no es en el actual contexto de referencia o de this, tal vez cuando esté en el then o catch métodos de una promesa. En ese caso, la captura de una referencia a this fuera de la promesa, a continuación, utilice por lo que la llamada a $emit es correcta.

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

Dejar respuesta

Please enter your comment!
Please enter your name here