VueJS vue-spinner 속성 또는 메서드 "로드"가 정의되지 않았습니다.

VueJS vue-spinner 속성 또는 메서드 "로드"가 정의되지 않았습니다.

안녕하세요 셋업을 시도하고 있는데 다음 오류가 나타납니다.

vue.esm.js:591 [Vue warn] :속성 또는 메서드 "loading"은 인스턴스에서 정의되지 않지만 렌더링 중에 참조됩니다.속성을 초기화하여 데이터 옵션 또는 클래스 기반 구성 요소에서 이 속성이 반응하는지 확인하십시오.

이것이 저의 주요 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>

도와줘서 고맙습니다.

데이터 객체 추가loading다음과 같이 모듈을 속성화하고 Import합니다.

  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이름.

셋업을 하고 있는 것 같습니다.vue-spinner잘못된 장소에 있는, 즉,main.js대신App.vue.

이것은 동작합니다(CodeSandbox 참조).

main.discloss.main.discloss.

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>
 ...

언급URL : https://stackoverflow.com/questions/52682506/vuejs-vue-spinner-property-or-method-loading-is-not-defined