Vue объекты данных не реагируют при срабатывании @change - PullRequest
Новая
       5

Vue объекты данных не реагируют при срабатывании @change

0 голосов
/ 17 января 2020

Создание страницы, которая будет отображать содержимое загруженного файла. Но я не понимаю, почему параметры данных msg и show не обновляются, когда они запускаются через @change. Мне нужно, чтобы оба эти параметра обновлялись только в случае успешной загрузки файла, поэтому я поместил их в функцию onload lambda: 

reader.onload = function(e) {
  this.msg = e.target.result;
  this.show = true;
  console.log(this.msg);
}

Также обратите внимание, что console.log(this.msg) правильно регистрирует содержимое файла , Так почему же ребенок не получает эти изменения?

Я также попытался установить их с помощью нажатия кнопки, и все работает нормально.

Вот мой код (Приложение. vue) : 

<template>
  <div id="q-app">
    <router-view></router-view>
    <input type="file" ref="file" @change="changeViaUpload">

    <br><br>
    <button @click="changeViaButton">Update data via Button</button>

    <hello :show=show :msg=msg></hello>
  </div>
</template>

<script>
import hello from '../components/Hello.vue'

export default {
  name: "app",
  components:{
        hello
    },
  data() {
    return {
      msg: "",
      show: false
    };
  },
  methods: {
    changeViaUpload(ev) {
      const file = ev.target.files[0];
      const reader = new FileReader();

      reader.onload = function(e) {
        this.msg = e.target.result;
        this.show = true;
        console.log(this.msg);
      };
      reader.readAsText(file);
    },
    changeViaButton() {
      this.msg = "Message has been changed via button";
      this.show = true;
    }
  }
};
</script>

А вот и моя Hello.vue: 

<template>
  <div v-if="show">
    <!-- <div> -->
        [Hello.vue] This div will be shown if boolean show is true
        <br>
        {{ msg }}
    </div>
</template>

<script>
export default {
    props: ['msg','show'],
    data() {
    return {
    };
  },
  methods: {
  }
};
</script>

Ссылка CodeSandbox

Помогите пожалуйста! Спасибо

Ответы [ 2 ]

1 голос
/ 17 января 2020

этот не является экземпляром Vue в вашем коде внутри функции onReader FileReader. Когда вы пишете: 

reader.onload = function() {}

, это становится onload внутри этой функции (ее область действия изменяется). Попробуйте 

const self = this

до reader.onload и используйте self внутри функции загрузки или попробуйте использовать жирную стрелку 

reader.onload = (e) => {}

жирные функции стрелок (или просто функции стрелок) имеют лексическое значение this , означающее, что область действия внутри таких функций не изменяется.

Источник: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

0 голосов
/ 17 января 2020

Так что теперь я могу заставить его работать. Я изменил changeViaUpload() для использования: 

var vm = this;

и обновил параметр с помощью: vm.msg

Фрагмент: 

    changeViaUpload(ev) {
      const file = ev.target.files[0];
      const reader = new FileReader();
      var vm = this;

      reader.onload = function(e) {
        vm.msg = e.target.result;
        vm.show = true;
        console.log(vm.msg);
      };
      reader.readAsText(file);
    },
...