не может изменить данные в обработчике @change vuejs - PullRequest
Новая
       35

не может изменить данные в обработчике @change vuejs

0 голосов
/ 31 мая 2018

Существует компонент, который содержит 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>

1 Ответ

0 голосов
/ 31 мая 2018

Вот рабочий пример. 

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>
...