javascript - 如何从计算属性 Vue.js 访问数据

Question

我正在使用 Vue.js，当我尝试从计算属性内的数据访问变量时，它返回 undefined。这是代码:

    <script>
     export default {
       name: 'app',
       data: () => {
         return {
           lang: 'sp'
         }
       },
       computed: {
         langEn: () => this.lang === 'en',
         langSp: () => this.lang === 'sp'
       }
     }
    </script>

这是在一个 NPM 项目中。在 .vue 文件中。像这样使用时，它的行为可能会有所不同？

感谢帮助

Answer 1

这是一个非常常见的“陷阱”。

在定义计算时不要使用粗箭头。

当你使用粗箭头来定义你的计算、方法或数据时，你在词法上捕获了 this 并且它将指向包含范围(通常是 window或未定义)而不是你的 Vue。

<script>
   export default {
     name: 'app',
     data() {
       return {
         lang: 'sp'
       }
     },
     computed: {
       langEn() { return this.lang === 'en' },
       langSp() { return this.lang === 'sp' }
     }
   }
</script>