不能在@change vuejs处理程序中更改数据 [英] can not change data in the @change vuejs handler

问题描述

有一个包含 input [type = file] 的组件. 另外，该字段具有 uploadFile 处理程序，该处理程序调用 validateMessage 方法，该方法试图更改错误.如您所见，更改this.error后，它表明一切正确.但是在div.error中它不会显示，并且如果您在vueDevtool中查找，那么也将为空. vueDevTools中的数据

 data() {
  return {
   error: ''
  }
},
   
methods: {

 validateFile(file) {
   if (! file.type.includes('video/')) {
     this.error = 'wrong format';
     console.log(this.error); // wrong format
   }
 },
 
 uploadFile(e) {
   const file = e.target.files[0];
   this.validateFile(file);
 },
} 

 <input type="file" 
       id="im_video" 
       name="im_video" 
       @change="uploadFile"
       class="hidden">
           
<div class="error">
  {{ error }}
</div> 

解决方案

这里是有效的示例.

 new Vue({
  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);
   },
  }
}); 

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <input type="file" 
         id="im_video" 
         name="im_video" 
         @change="uploadFile"
         class="hidden">

  <div class="error">
    {{ error }}
  </div>
</div> 

如果您使用的是组件，则在您将案例子组件设置为error从父组件到父组件的情况下，这将有助于更多地从子组件共享数据.

 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 = new Vue({
  el:'#app',
  mounted(){
    this.$on('filerror', function (msg) {
      this.error = msg;
    })
  },
  data:{
    error:''
  }
}); 

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

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 can see, after changing this.error it shows that everything is correct. But in div.error it is not displayed and if you look in vueDevtool, then there is also empty. data in vueDevTools

data() {
  return {
   error: ''
  }
},
   
methods: {

 validateFile(file) {
   if (! file.type.includes('video/')) {
     this.error = 'wrong format';
     console.log(this.error); // wrong format
   }
 },
 
 uploadFile(e) {
   const file = e.target.files[0];
   this.validateFile(file);
 },
}

<input type="file" 
       id="im_video" 
       name="im_video" 
       @change="uploadFile"
       class="hidden">
           
<div class="error">
  {{ error }}
</div>

解决方案

Here is working example.

new Vue({
  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);
   },
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <input type="file" 
         id="im_video" 
         name="im_video" 
         @change="uploadFile"
         class="hidden">

  <div class="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 = new Vue({
  el:'#app',
  mounted(){
    this.$on('filerror', function (msg) {
      this.error = msg;
    })
  },
  data:{
    error:''
  }
});

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

这篇关于不能在@change vuejs处理程序中更改数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！