Javascript VueJS vue微调器属性或方法“；“装载”；没有定义

您好，我正在尝试设置，但出现错误：

vue.esm.js:591[vue warn]：属性或方法“loading”未在实例上定义，而是在渲染期间引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的

这是我的主要JS（app.JS）：

从“Vue”导入Vue；
从“./App.vue”导入应用程序
从“axios”导入axios
从“./路由器”导入路由器
从“/vuex/store”导入存储；
从“vue微调器/src/PulseLoader.vue”导入脉冲加载程序
需要（'../scss/style.scss'）；
Vue.config.productionTip=false；
Vue.prototype.$http=axios；
新Vue({
el:“#vuepp”，
路由器，
商店，
模板：“”，
组成部分：{
应用程序，
脉冲装载机
},
});

我的.vue

    <template>
    <div class="app">
        <pulse-loader :loading="loading" :color="color" :size="size"></pulse-loader>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <router-link class="nav-item" tag="li" to="/" active-class="active">
                        <a class="nav-link">Home</a>
                    </router-link>
                    <router-link class="nav-item" tag="li" to="/wow" active-class="active">
                        <a class="nav-link">Wow</a>
                    </router-link>
                </ul>
            </div>
        </nav>

        <router-view></router-view>
    </div>
</template>


<script>
    export default {
        name: 'app',
        data: () => {
            return {
                color: '#000000',
                size: '1000px'
            }
        }
    }
</script>

<style lang="scss">

</style>

家
哇！

导出默认值{
名称：“应用程序”，
数据：（）=>{
返回{
颜色：'#000000'，
尺寸：'1000px'
}
}
}

---

感谢您的帮助。

在数据对象中添加

加载

属性并按如下方式导入模块：

  import PulseLoader from "vue-spinner/src/PulseLoader.vue";
 export default{
 data: () => {
        return {
            color: '#000000',
            size: '1000px',
            loading:true
        }
    },
   components:{PulseLoader}
   ...
  }

或者您可以使用

computed

属性，如：

  computed:{
  loading(){ return true;} 
   }

---

您可以做任何您想做的事情，并通过加载

返回一个布尔值
name
看起来您在错误的位置设置了
vue微调器
，即
main.js
而不是
App.vue

这是有效的（参见）

main.js

从“Vue”导入Vue；
从“/App”导入应用程序；
//从“vue微调器/src/PulseLoader.vue”导入脉冲加载程序；
Vue.config.productionTip=false；
/*eslint禁用无新*/
新Vue({
el:“vueApp”，
模板：“”，
组成部分：{
应用程序，
//脉冲装载机
}
});

App.vue


...
从“vue微调器/src/PulseLoader.vue”导入脉冲加载程序；
导出默认值{
名称：“应用程序”，
数据（）{
返回{
加载：对，
颜色：“2c3e50”，
尺寸：“10px”
};
},
组成部分：{
脉冲装载机，
...
}
};
...

  computed:{
  loading(){ return true;} 
   }