반응형
개발을 하던 도중 Select Box를 구현하던 와중 전처리 로직이 필요해 watch를 사용하였다.
- Select Box 선택
- 선택한 값을 이용해 넘기는 파라메타 변경
- 파라메타를 이용해 데이터 호출
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Select Box Watch Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>Select a Fruit:</h2>
<!-- Select Box with v-model and @change -->
<select v-model="selectedFruit" @change="handleFruitChange">
<option v-for="fruit in fruits" :key="fruit.value" :value="fruit.value">{{ fruit.label }}</option>
</select>
<p>You selected: {{ selectedFruit }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
selectedFruit: '',
fruits: [
{ value: 'apple', label: 'Apple' },
{ value: 'banana', label: 'Banana' },
{ value: 'orange', label: 'Orange' },
{ value: 'grape', label: 'Grape' }
]
},
watch: {
selectedFruit: function(newVal, oldVal) {
console.log(`Selected fruit changed from "${oldVal}" to "${newVal}"`);
// 여기에 원하는 로직을 추가할 수 있습니다.
}
},
methods: {
handleFruitChange() {
// @change 이벤트 핸들러에서 필요한 로직을 처리할 수도 있습니다.
console.log('Select box value changed');
}
}
});
</script>
</body>
</html>
정리💯
Vue.js의 watch 속성은 데이터의 변화를 감지하고, 데이터가 변경된 후에 설정된 로직을 실행한다. 반면에 @change 이벤트는 <select> 요소의 값이 변경될 때 바로 이벤트 핸들러를 실행한다.
따라서 Vue.js의 watch 속성에 등록한 로직은 <select> 요소의 값이 변경되고 데이터가 실제로 변경된 후에 실행되므로, @change 이벤트 핸들러보다 후에 실행된다.
반응형
'WEB' 카테고리의 다른 글
| SSR vs CSR vs 번들링 (0) | 2023.10.19 |
|---|---|
| [Nuxt.js] Vue.js 페이지 이동 및 파라미터 전달 방법 (0) | 2023.08.28 |
| [Vue.js] static VS assets (0) | 2023.06.14 |
| [Nuxt.js] CORS 우회방법 #Proxy (0) | 2023.06.05 |
| [Nuxt.js]Components 적용 방법 #vue (0) | 2023.06.02 |
