Vue 数据 objects 在被 @change 触发时没有反应

Question

正在创建一个将显示上传文件内容的页面。但我不明白为什么 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) 正确记录了文件内容。那么为什么 child 没有得到这些变化呢？

我也试过通过点击按钮来设置它们，效果很好。

这是我的代码 (App.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 link

请帮忙！谢谢

Answer 1

所以我现在可以让它工作了。我将 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);
    },

Answer 2

this 不是 FileReader 的 onload 函数中代码中的 Vue 实例。当你写：

reader.onload = function() {}

this 成为该函数内的 onload （其范围发生变化）。尝试

const self = this

before reader.onload 并在 onload 函数中使用 self，或者尝试使用 fat arrow函数

reader.onload = (e) => {}

fat arrow functions（或者只是简单的箭头函数）有一个词法 this，这意味着作用域在这些函数内部不会改变。

来源：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Vue 数据 objects 在被 @change 触发时没有反应

Vue data objects are not being reactive when triggered by @change

javascript

node.js

vue.js

quasar