【问题标题】：VueJS DOM not updating when data does [duplicate]数据更新时VueJS DOM不更新[重复]
【发布时间】：2018-08-04 18:11:12
【问题描述】：

所以我有一个带有按钮和一些文本的简单示例，但由于某种原因，即使在我记录 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>
...

【问题讨论】：

标签： java vue.js vuejs2 vue-component

【解决方案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，并且不会反映Vue实例。

来自API Docs：

请注意，您不应将箭头函数与 data 属性一起使用（例如 data: () => { return { a: this.myProp }}）。原因是箭头函数绑定了父上下文，所以this 不会是你期望的 Vue 实例，this.myProp 将是未定义的。

【讨论】：