Vue ClIでの実装中発生したエラーの件なのですが
下記のようなエラーが出ており...
色城調査したのですが、解決に至らず...
エラー
vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "loading" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. found in ---> <Loading> at src/components/Loading.vue <App> at src/App.vue <Root>
App.vue
<template> <div id="app"> <Loading v-show="loading"></Loading> <Header></Header> <transition mode="out-in"> <!-- 「mode="out-in"」を追加する --> <router-view/> </transition> <Footer></Footer> </div> </template> <script> import Loading from '@/components/Loading' import Header from './components/Header.vue'; import Footer from './components/Footer.vue'; export default { name: 'App', data() { return { loading: true, } }, components: { Loading, Header, Footer }, mounted() { setTimeout(() => { this.loading = false; }, 1000); }, } </script> <style> * { margin: 0; padding: 0; } ul, li { list-style-type: none; } img { max-width: 100%; height: auto; } a { text-decoration: none; color: #000; } a:hover { color: #000; } button { border: 0; background-color: transparent; } .v-enter-active, .v-leave-active { transition: opacity .5s; } .v-enter, .v-leave-to { opacity: 0; } </style>
main.js
import Vue from 'vue' import App from './App.vue' import axios from 'axios' //追記 import VueAxios from 'vue-axios' //追記 import router from './route.js' import Headline from './components/Headline.vue' import ItemBox from './components/ItemBox.vue' import Menu from './components/Menu.vue' import Top from './components/Top.vue' Vue.config.productionTip = false Vue.use(VueAxios, axios) //追記 Vue.component( 'Headline', Headline ); Vue.component( 'ItemBox', ItemBox ); Vue.component( 'Menu', Menu ); Vue.component( 'Top', Top ); new Vue({ router, render: h => h(App), }).$mount('#app')
よろしくお願いいたします。