java - 当数据更新时，VueJS DOM 不更新

Question

这个问题已经有答案了:

VueJS: why is "this" undefined? (4 个回答)

已关闭 5 年前。

所以我有一个带有按钮和一些文本的简单示例，但由于某种原因，即使当我记录 Vue 对象时，数据显然正在更新，它也没有更新。

<template>
  <div>
    <span>{{ showNav }}</span>
    <span class="parallax__nav__trigger" v-on:click="toggleNav">
        Menu 
    </span>
  </div>
</template>

<script>
export default {
    data: () => ({
      showNav: false,
    }),
    methods: {
      toggleNav: () => {
        this.showNav = !this.showNav
        console.log(this)
      }
    }
  }
</script>
...

Answer 1

声明函数时请注意 this:

export default {
    data: () => ({
      showNav: false,
    }),
    methods: {
      toggleNav: () => {
        this.showNav = !this.showNav
        console.log(this)
      }
    }
}

应该是:

export default {
    data() {                                   // <== changed this line
      showNav: false,
    },
    methods: {
      toggleNav() {                            // <== changed this line
        this.showNav = !this.showNav
        console.log(this)
      }
    }
}

推理

声明 Vue 方法时不要使用箭头函数 (() => {})。它们从当前作用域(可能是 window)中获取 this，并且不会反射(reflect) Vue 实例。

来自API Docs :

Note that you should not use an arrow function with the data property (e.g. data: () => { return { a: this.myProp }}). The reason is arrow functions bind the parent context, so this will not be the Vue instance as you expect and this.myProp will be undefined.