Vue 3 Forms - Base Select

Form 에서 select element을 이용하여 option 을 선택하는 것을 재사용이 가능한 component 로 변경 하고자 한다.

SimpleForm.vue 의 select element 를 별도의 file을 이용하여 componemt 화 한다.

 

SimpleForm.vue

<label>Select a category</label>
<select v-model="event.category">
  <option
    v-for="option in categories"
    :value="option"
    :key="option"
    :selected="option === event.category"
  >{{ option }}</option>
</select>

 

Design Concept

별도의 file 을  이용하여 아래와 같이 재사용이 가능한 component 를 설계한다.

 

BaseSelect.vue

<template>
  <label v-if="label">{{ label }}</label>
  <select
    :value="modelValue"
    class="field"
  >
    <option
      v-for="option in categories"
      :value="option"
      :key="option"
      :selected="option === event.category"
    >{{ option }}</option>
  </select>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: ''
    },
    modelValue: {
      type: [String, Number],
      default: ''
    }
  }
}
</script>

parent 에서 contents의 detail 을 변경하거나 제공할 수 있어야 한다. → label prop 를 추가한다

 

Making it v-model ready

BaseSelect component is v-model ready, that way whenever it is used by our parent form, or any other form, it can easily be used with a double binding directly into our parent’s state.

BaseSelect 구성 요소는 v-model을 지원하므로 상위 양식이나 다른 양식에서 사용될 때마다 상위 상태에 직접 이중 바인딩을 사용하여 쉽게 사용할 수 있다.

 

• modelVAlue 은 custom component 로 v-model 을 통한 double binding 을 할 때 Vue 가 찾는 기본 property 이다.
• parent component 와 정보교환을 위한 양방향 bind 을 구현하기 위해서는 아래 code 가 필요하다.
• field class 도 좋게 보이기 위하여 select element  에 추가한다.

  v-bind="{

      ...$attrs,

      onChange: ($event) => { $emit('update:modelValue', $event.target.value) }

   }"

 

 

BaseSelect.vue

<template>
  <label v-if="label">{{ label }}</label>
  <select
    class="field"
    :value="modelValue"
    v-bind="{
      ...$attrs,
      onChange: ($event) => { $emit('update:modelValue', $event.target.value) }
    }"
  >
    <option
      v-for="option in categories"
      :value="option"
      :key="option"
      :selected="option === modelValue"
    >{{ option }}</option>
  </select>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: ''
    },
    modelValue: {
      type: [String, Number],
      default: ''
    },
    options: {
      type: Array,
      required: true
    }    
  }
}
</script>

이전과 select input 과 마찬가지로 moelValue 를 이용하는 것에 추가로  event 처리를 위하여 emit 를 사용한다.

$attr 과 onChange 를 bind 하여 style 과 css 그리고 onChange event 도 처리가능하게 한다..

 

Selecting the correct option

<template>
  <label v-if="label">{{ label }}</label>
  <select
    class="field"
    :value="modelValue"
    v-bind="{
      ...$attrs,
      onChange: ($event) => { $emit('update:modelValue', $event.target.value) }
    }"
  >
    <option
      v-for="option in options"
      :value="option"
      :key="option"
      :selected="option === modelValue"
    >{{ option }}</option>
  </select>
</template>

In order to make our BaseSelect component work with any array of options, we are going to first rename categories to options in our v-for loop. Then, we’ll create an options prop so that our component can receive this information from the parent.

BaseSelect 구성 요소가 모든 옵션 배열과 함께 작동하도록 하려면 먼저 v-for 루프에서 categories 이름을 옵션options 으로 바꾸어야한다.  그런 다음 component 가 parent 로부터 이 정보를 받을 수 있도록 options prop을 만든다.

 

Updating the form

SimpleForm.vue 에서 아래와 같이 component 를 사용하면 된다.

<BaseSelect
  :options="categories"
  v-model="event.category"
  label="Select a category"
/>

 

 

아래에 재사용 가능한 component code 가 있다

https://github.com/pidokige02/Vue-3-Form-demo

GitHub - pidokige02/Vue-3-Form-demo