推理

Question

所以我有一个带按钮和一些文本的简单示例但由于某种原因，即使我记录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方法时，请勿使用箭头函数（() => {}）。他们从当前范围（可能this）中选取window，并且不会反映Vue实例。

来自API Docs：

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

数据有效时，VueJS DOM不会更新

1 个答案:

推理