반응형
data 속성으로 설정한 변수만 웹브라우저에서 감시를 하고 변경사항을 적용시켜준다
var vm1 = new Vue({
el : '#test1',
data : {
value1 : 100,
obj1 : {}
}
})
vm1.value2 = 1000
<body>
<div id='test1'>
<h3>value1 : {{value1}}</h3>
<h3>value2 : {{value2}}</h3>
<button type='button' @click='setValue2'>value2</button>value1 은 표시 되지만 value2 는 웹브라우저에 표시되지 않는다
value2 는 button 을 클릭해서 action 을 주면 웹브라우저에 표시된다
data 속성으로 표시 하지 않는 변수를 웹브라우저가 감시하고 적용할 수 있게 하려면 Vue.set 을 사용해서 data 안에 넣어주는 방식으로 해결한다
//vm1.value2 = 1000
Vue.set(vm1.obj1, 'value2', 1000)
<body>
<div id='test1'>
<h3>value1 : {{value1}}</h3>
<h3>value2 : {{obj1.value2}}</h3>
<button type='button' @click='setValue2'>value2</button>
watch
Uploaded by N2T
반응형
'IT > Vue' 카테고리의 다른 글
| Vue Lifecycle 학습정리 (0) | 2022.08.25 |
|---|---|
| Vue Event 학습정리 (0) | 2022.08.25 |
| Vue Template Syntax 학습정리 (0) | 2022.08.25 |
| Vue Component 학습정리 (0) | 2022.08.25 |
| Vue Rendering 학습정리 (0) | 2022.08.25 |
| Vue Routing 학습정리 (0) | 2022.08.25 |
| Vue Mixin 학습정리 (0) | 2022.08.25 |
| vue.js 용량 줄이기 (0) | 2022.08.25 |