[Vuejs]-JQuery not calling first time when file change

by

0👍

You should put the console.log directly inside your setFile function, because vue.js is reactive it fires the change event on that function in the first place, because you have bound the function setFile to it with the @change line in your sourcecode. I don’t see why you’re using the second eventhandler with jQuery anyways. It fires from the second time onwards, because you attach the eventListener with jQuery inside the setFile function which has to be called at least one time with the change event you bound with @change. You could also try to move the jQuery eventListener outside the setFile function.

This should work:

<template>

    <form>
       ....
        <input type="file" ref="file" :id="'myID'" 
@change="setFile('myID',$event)"/>

        ....
    </form>
</template>

<script>
export default {
  methods: {
    setFile(id, e) {
      console.log(id, e.target.files[0]);
    },
  },
};
</script>

0👍

i fixed it by adding @click function

<input
                            type="file" ref="file"
                            @change="setFile(document_file.id,$event)"
                            accept="application/pdf"
                            class="custom-file-input"
                            name="document_file"
                            v-bind:id="document_file.id"
                            @click="setFileName"
                        />
            setFileName(){
                $('input[type=file]').change(function (e) {
                    $(this).parents('.custom-file').find('.custom-file-label').text(e.target.files[0].name);
                });
            },

Leave a comment