См. "Это" в приложении. vue вызывает неопределенную ошибку

Question

Мое приложение. 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
}

на

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

• Не используйте функцию стрелки es6, иначе this потеряет доступ к нужному объекту. Вот хороший ответ о переполнении стека на этот счет.
• this.data должен использоваться как this.$data (в противном случае он ищет свойство data в свойстве data ), но также не делайте этого: вам вообще не нужно ссылаться на data, и вы можете go напрямую обращаться к переменной

Answer 2

Использование функции стрелки создает анонимную функцию, которая означает, что this привязан к window, а не к экземпляру vue. Использование function гарантирует, что значение this будет vue экземпляром. Поэтому измените вычисляемое свойство isLoggedIn на:

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

// or

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