您好,我正在尝试设置View-Spinner-> https://www.npmjs.com/package/vue-spinner
但是出现错误:
vue.esm.js:591 [Vue警告]:属性或方法“ loading”未在实例上定义,但在渲染期间被引用。通过初始化属性,确保该属性在data选项中或对于基于类的组件都是反应性的。
那是我的主要JS(app.js):
import Vue from 'vue';
import App from './App.vue'
import axios from 'axios'
import router from './router'
import store from './vuex/store';
import PulseLoader from 'vue-spinner/src/PulseLoader.vue'
require('../scss/style.scss');
Vue.config.productionTip = false;
Vue.prototype.$http = axios;
new Vue({
el: '#vueApp',
router,
store,
template: '<App/>',
components: {
App,
PulseLoader
},
});
我的.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>
感谢您的帮助。
答案 0 :(得分:0)
在数据对象中添加loading
属性,并按如下所示导入模块:
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;}
}
您可以做任何您想做的事情,并返回带有loading
名称的布尔值
答案 1 :(得分:0)
您似乎在错误的位置设置了vue-spinner
,即main.js
而不是App.vue
。
这有效(请参见CodeSandbox)
main.js
import Vue from "vue";
import App from "./App";
// import PulseLoader from "vue-spinner/src/PulseLoader.vue";
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: "#vueApp",
template: "<App/>",
components: {
App,
// PulseLoader
}
});
App.vue
<template>
<div id="app">
<pulse-loader :loading="loading" :color="color" :size="size"></pulse-loader>
...
</div>
</template>
<script>
import PulseLoader from "vue-spinner/src/PulseLoader.vue";
export default {
name: "App",
data() {
return {
loading: true,
color: "#2c3e50",
size: "10px"
};
},
components: {
PulseLoader,
...
}
};
</script>
<style>
...