如何从计算属性 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>