vuejs v2.0에서 컴포넌트로 데이터 전달

vuejs v2.0에서 컴포넌트로 데이터 전달

vue.js를 사용하여 Laravel 5.3에 앱을 구축하여 페이지를 동적으로 만들기 위해 vue.js로 이동하기 시작했습니다.한 페이지에서 모든 작업을 수행할 수 있으므로 컴포넌트로 변환하고 싶은데 변환하면 다음과 같은 오류가 나타납니다.

[Vue warn]: Error when rendering component <homepage> at C:\xampp\htdocs\....... 
TypeError: Cannot read property 'nxt_weekly' of undefined

다음과 같이 데이터를 뷰에 전달했습니다.

const app = new Vue({
el: '#app',

mounted: function () {
    this.fetchEvents();
},

data: {
    loading: true,
    stats: []
},

methods: {
    fetchEvents: function () {
        this.$http.get('home/data').then(function (response) {
            this.stats = response.body;
            this.loading = false;
        }, function (error) {
            console.log(error);
        });
    }

});

In stats[]는 API로부터의 JSON 응답을 보류하고 다음과 같이 뷰 내의 모든 응답을 호출합니다.

<span class="stat" v-text="'stats.nxt_today'"></span>
....
....

이것은 동작합니다만, 컴포넌트 작성으로 전환하면, 상기의 에러가 표시됩니다.새로운 코드는 다음과 같습니다.

Vue.component('homepage', require('./components/Homepage.vue'),{

    mounted: function () {
        this.fetchEvents();
    },

    data: function () {
        return{
            loading: true,
            stats: []
        }
    },


    methods: {
        fetchEvents: function () {
            console.log('running here');
            this.$http.get('home/data').then(function (response) {
                this.stats = response.body;
                this.loading = false;
            }, function (error) {
                console.log(error);
            });
        }
    }
});

내가 뭘 잘못하고 있지?컴포넌트가 접근하려고 하는데 왜 내 stats[] 객체가 비어 있는 거죠?

통과해야 합니다.stats를 사용하여 컴포넌트의 속성으로서v-bind다음과 같이 합니다.

<homepage v-bind:stats="stats"></homepage>

위의 작업은 루트 템플릿에서 수행해야 합니다.그리고 당신의 안에homepagecomponent, 값을 수신할 수 있습니다.props다음과 같습니다.

Vue.component('homepage', {
    props: ["stats"],
    mounted: function () {
        // ...
    },
    // ...
}

이 컴포넌트의 템플릿 내에서stats.nxt_today보통.

그런데 당신의 통계는 어레이입니까, 오브젝트입니까?처음에는 빈 배열로 정의했지만 개체로 액세스했습니다.

여전히 문제가 있는 경우 vue-devtools를 사용하여 구성 요소 내에서 사용할 수 있는 모든 개체를 볼 수 있습니다.

언급URL : https://stackoverflow.com/questions/41065279/vuejs-v2-0-pass-data-to-component