Vue.js에서 입력 폼을 만들 때 사용할 수 있는 Selectbox 컴포넌트를 만드는 방법을 소개하고자 한다.
SelectBox.vue (이름은 자유롭게 정한다) 파일을 하나 만들고 template를 아래와 같이 작성한다.
<template>
<select
v-model="this.value"
class="custom-select"
v-bind:id="input_id"
v-on:input="updateValue($event.target.value)"
>
<option v-for="(item, index) in items" :value="index">{{ item }}</option>
</select>
</template>
Vue.js 2.2 버전부터 v-model을 사용하는 컴포넌트는 value props를 가진다. (참고: #) 따라서 별도로 v-bind로 props를 내려줄 필요 없이 하위 컴포넌트에서 this.value라고만 명시해주면 상위 컴포넌트의 value 값을 하위 컴포넌트 값으로 가져올 수 있다.
그리고, v-on:input="updateValue($event.target.value)" 부분은 사용자가 selectbox의 값을 변경할 경우 변경된 값을 상위 컴포넌트로 전송하기 위한 코드이다. 이 코드가 없으면 상위 컴포넌트에 사용자가 변경한 값이 반영되지 않으니 주의하여야 한다.
script는 아래와 같이 작성한다.
<script>
export default {
name: "SelectBox",
data() {
return {
//
};
},
props: ['value', 'items', 'input_id'],
methods: {
updateValue: function (value) {
this.$emit('input', value);
}
}
}
</script>
updateValue 메서드는 사용자가 입력한 값을 input 이벤트로 내보내는 역할을 한다.
마지막으로, 컴포넌트를 가져다 쓰는 부분의 코드는 아래와 같다.
<SelectBox
v-model="preselect_value"
:items="somethings"
:input_id="'my_selectbox'"
@input="value => { preselect_value = value }"
></SelectBox>
Recent Comments