Can Not Change Data In The @change Vuejs Handler

There is a component that contains input[type=file]. Also, this field has an uploadFile handler, which calls the validateMessage method, which attempts to change the error. As you

Solution 1:

Here is working example.

newVue({
  el:'#app',
  data() {
    return {
     error: ''
    }
  },

  methods: {

   validateFile(file) {
      console.log(file.type);
     if (! file.type.includes('video/')) {
       this.error = 'wrong format';
       //console.log(this.error); // wrong format
     }
   },

   uploadFile(e) {
     this.error = '';
     const file = e.target.files[0];
     this.validateFile(file);
   },
  }
});

<scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><divid="app"><inputtype="file"id="im_video"name="im_video" 
         @change="uploadFile"class="hidden"><divclass="error">
    {{ error }}
  </div></div>

If you are using component this would help more to share data from child to parent in your case setting error from child component to parent

Vue.component('upload-file',{
  template:`<div><input type="file" 
         id="im_video" 
         name="im_video" 
         @change="uploadFile"
         class="hidden"></div>`,
  data() {
    return {
     error: ''
    }
  },

  methods: {
   validateFile(file) {
      //if (! file.type.includes('video/')) {
       vm.$emit('filerror', 'wrong format');
     }
   },

   uploadFile(e) {
    vm.$emit('filerror', '');
     const file = e.target.files[0];
     this.validateFile(file);
   },
  }
});
const vm = newVue({
  el:'#app',
  mounted(){
    this.$on('filerror', function (msg) {
      this.error = msg;
    })
  },
  data:{
    error:''
  }
});

<scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><divid="app"><upload-file></upload-file><divclass="error">
    {{ error }}
  </div></div>