마운트된 이벤트에서 vue 구성 요소 데이터 멤버에 값을 할당하는 방법
저는 vue 설명서를 읽고 제 지식을 테스트하기 위해 코드를 쓰기 시작했습니다.마운트 시 데이터 멤버를 설정하는 컴포넌트를 써보려고 했지만 예상대로 되지 않는 것 같습니다.구성 요소 데이터 멤버 "프로파일"은 항상 비어 있습니다.내 직감으로는 범위와 관련된 것일 수 있지만 확실하지는 않다.
Vue.component('profile-grid',
{
template: '<section> {{profiles}} </section>',
//Data es la parte privada del documento. Props la parte publica que se deberia de pasar desde la instancia Vue
data: () =>
{
return {
profiles: []
};
},
methods:
{
},
created: () =>
{
//console.log("I was just created")
},
mounted: () =>
{
//console.log("I was just mounted")
this.profiles = ['1', '2', '3'];
}
})
//Vue instance
new Vue(
{
el:'main',
data:
{
},
methods:
{
},
mounted: () =>
{
}
});
HTML 페이지
//HTML Page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<main>
<profile-grid></profile-grid>
</main>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="main.js"></script>
</html>
무슨 일이 일어나고 있는지 아는 사람 있나요?
잘 부탁드립니다.
Vue 훅, 메서드 등을 화살표 함수로 선언하지 마십시오.화살표 기능 사용this참조할 수 있습니다.
화살표 함수에는 자체 이 값이 없습니다.포함된 실행 컨텍스트의 이 값이 사용됩니다.
사용하려면 메서드 정의 구문 또는 함수 선언을 사용해야 합니다.thisVue 인스턴스로:
mounted: function() {
//do something
}
또는
mounted() {
//do something
}
섹션 하단의 "Vue docs notice"를 참조하십시오.
vuej의 반응성 경고 중 하나를 발견했습니다.기본적으로 Vuejs가 반응할 수 없는 방법으로 원래 프로파일을 교체하므로 업데이트되지 않습니다.
어레이의 변경을 알아차리는 방법 중 하나는 먼저 데이터 속성을 늘로 할당하고 나중에 마운트된 방식으로 어레이를 할당하는 것입니다.리액티브 어레이를 나중에 갱신할 수 있는 또 다른 방법은 푸시 방식이나 맵과 같은 비변환 방식을 사용하여 새 어레이를 생성하고 오래된 어레이를 새 어레이로 교체하는 것입니다.
Vue.component('profile-grid', {
template: `
<section>
<div>{{profiles && profiles.length ? profiles : ''}} </div>
<div>{{profilesTwo && profilesTwo.length ? profilesTwo : ''}}</div>
</section>`,
data () {
return {
profiles: null,
profilesTwo: []
};
},
created () {
//console.log("I was just created")
},
mounted () {
//console.log("I was just mounted")
this.profiles = ['1', '2', '3'];
this.profilesTwo = ['5', '4', '6'].map(item => item)
}
});
new Vue({
el:'#app',
data () {
return {}
},
mounted () {
console.log('vue instance mounted');
}
});<script src="https://unpkg.com/vue"></script>
<main id="app">
<profile-grid></profile-grid>
</main>언급URL : https://stackoverflow.com/questions/51135648/how-to-assign-a-value-to-a-vue-component-data-member-in-mounted-event
'programing' 카테고리의 다른 글
| vuex / nuxtClientInit용 후크가 생성되었습니까? (0) | 2022.09.01 |
|---|---|
| C에서 어레이 선언 및 초기화 (0) | 2022.09.01 |
| [Vue warn] :생성된 후크 오류: "TypeError: 정의되지 않은 속성을 설정할 수 없습니다" (0) | 2022.09.01 |
| Python Flask 서버를 통해 Vue 앱이 로드되지 않음 (0) | 2022.09.01 |
| vuejs의 다른 컴포넌트 내부에 있는 입력에 초점을 맞추고 있습니까? (0) | 2022.09.01 |