반응형
Vue에서 구성 요소가 생성되었을 때 기능을 구현하는 방법은 무엇입니까?
문서에 따르면 Vue 객체의 생성자는 다음과 같이 관리된다.
var vm = new Vue({
created: function () { console.log("I'm created!"); }
});
그러나 Vue 컴포넌트가 생성되었을 때 대응하는 방법을 알 수 없습니다.다음을 시도했지만 콘솔에 인쇄가 되지 않습니다.
export default {
created: function() { console.log("Component created!"); }
}
렌더링 중인 컴포넌트를 구독/청취할 수 있습니까?그 이벤트에 대응하여 데이터를 다운로드하여 스토어에 넣어 컴포넌트가 가지고 있는 테이블에 정보를 표시하도록 하고 싶습니다.
어플리케이션에서 사용하는 경향이 있습니다.mounted
컴포넌트가 마운트되면 Ajax 데이터를 로드합니다.
내 앱의 코드 예:
Vue.component('book-class', {
template: '#booking-template',
props: ['teacherid'],
data: function () {
return{
// few data items returned here..
message: ''
}
},
methods: {
// Few methods here..
},
computed: {
// few computed methods here...
},
mounted: function () {
var that = this;
$.ajax({
type: 'GET',
url: '/classinfo/' + this.teacherid,
success: function (data) {
console.log(JSON.stringify(data));
}
})
}
});
new Vue({
el: '#mainapp',
data: {
message: 'some message here..'
}
});
단, created() 훅도 라이프 사이클과 마찬가지로 사용할 수 있습니다.
Vue2에는 다음과 같은 라이프 사이클 후크가 있습니다.
컴포넌트에는 앱과 같은 라이프 사이클 훅이 없지만 비슷한 점이 있습니다.문제를 해결했습니다.https://vuejs.org/v2/api/ #http://https://vuejs.org/v2/api/
언급URL : https://stackoverflow.com/questions/41065194/how-to-implement-a-function-when-a-component-is-created-in-vue
반응형
'itsource' 카테고리의 다른 글
Vue.js vuex 모듈 내보내기/가져오기 실패 (0) | 2022.08.16 |
---|---|
Java에서 개체 배열을 문자열 배열로 변환하는 방법 (0) | 2022.08.16 |
2차원 어레이를 할당하는 이상한 방법? (0) | 2022.08.16 |
vuejs에서 제목 태그를 동적으로 바인딩 (0) | 2022.08.16 |
Vuex에 있는 다른 상점의 getter를 어떻게 부르죠? (0) | 2022.08.16 |