반응형
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>
위의 작업은 루트 템플릿에서 수행해야 합니다.그리고 당신의 안에homepage
component, 값을 수신할 수 있습니다.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
반응형
'programing' 카테고리의 다른 글
여러 연결을 할 때 C에서 소켓타임아웃을 설정하려면 어떻게 해야 합니까? (0) | 2022.08.16 |
---|---|
GCC를 사용하여 읽을 수 있는 어셈블리를 만들고 있습니까? (0) | 2022.08.09 |
Requirejs에서 Vue.js를 사용하는 방법 (0) | 2022.08.09 |
Java에서 int를 char로 변환 (0) | 2022.08.09 |
JTextField로의 값 변경 리스너 (0) | 2022.08.09 |