[lazy component]There's a weird problem here, probably a vue render function problem

[tomieric]

• https://codesandbox.io/s/admiring-gates-genyg

I created a lazy component

<!-- lazy.vue -->
<lazy-component>
  <v-image />
</lazy-component>

and, Another image component

<script>
export default {
  props: {
    data: {
      type: String
    }
  },

  data() {
    return {
      isLoading: true
    };
  },

  methods: {
    load() {
      const img = document.createElement("img");
      const that = this;
      that.isLoading = true;
      // not working
      img.onload = () => {
        this.isLoading = false;
        console.log(this.isLoading, this) // false, vnode, updated hook has called, but template not changed
      };

      // working
      // img.onload = function () {
      //   that.isLoading = false;
      // };
      img.src = this.data;
    }
  },

  mounted() {
    this.load();
  }
};
</script>

If you use the arrow function, the template cannot be updated

[LouWii]

This is because arrow functions don't have the same scope as an anonymous function. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

This has nothing to do with vue-lazyload.