请参阅App.vue中的`this`导致未定义的错误

Question

我的App.vue文件：

<template>
  <v-app app color="grey">
    <Navbar v-if="isLoggedIn"></Navbar>
    <v-content class="mx-4 mb-4">
      <router-view></router-view>
    </v-content>
  </v-app>
</template>

<script>
import Navbar from "./components/Navbar";

export default {
  name: "App",
  components: { Navbar },

  data: () => {
    return {
      loggedIn: true
    };
  },
  computed: {
    isLoggedIn: () => this.data.loggedIn
  },

  mounted() {
    console.log(process.env);
  },

  created() {}
};
</script>

在浏览器中加载应用程序，我收到了错误消息：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'data' of undefined"

截屏：

Answer 1

更改此：

computed: {
  isLoggedIn: () => this.data.loggedIn
}
to
computed: {
  isLoggedIn() {
    return this.loggedIn;
  } 
}

Answer 2

使用箭头函数会创建一个匿名函数，这意味着this绑定到window而不是vue实例。使用function可确保this的值是vue实例。因此，将isLoggedIn计算的属性更改为：

computed: {
    isLoggedIn: function() { return this.data.loggedIn }
}

// or

computed: {
    isLoggedIn() { return this.data.loggedIn }
}