Vue 3 Forms : Base Checkbox

Labels first

parent 에서 component 내부로  label 을 넘겨주기 위하여 label 을 prop  로 component 에 추가 한다

 

Making it v-model capable

1. 체크박스 입력은 해당 상태를 값에 직접 바인딩하는 것이 아니라 체크된 속성에 바인딩한다. 체크박스의 값이라고 하는 속성은 일반적으로 프런트엔드에서 사용되지 않는다.
2. checkbox type 의  <input>은 input  이벤트를 트리거하지 않고, selected 및 unselected 될 때마다 change event 를 trigger 합니다.
3. parent component 에게 checkbox 가 전환되었음을 알리고 싶을 때마다 update:modelValue를 내보낼 필요가 있다,  이를 위해서는 입력 element 에서 @change 이벤트를 듣고 있다가, change event 가 fire 될때마다 요소의 새로운 확인된 상태를 emit 하게 된다

BaseCheckbox.vue

<template>
  <input
    type="checkbox"
    :checked="modelValue"
    @change="$emit('update:modelValue', $event.target.checked)"
    class="field"
  />
  <label v-if="label">{{ label }}</label>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: ''
    },
    modelValue: {
      type: Boolean,
      default: false
    }
  }
}
</script>

Notice that for checkboxes we are not emitting the target’s value through $event.target.value, but instead the checked status through $event.target.checked.

 

 

Using our new component

SimpleForm.vue

<h3>Extras</h3>
<div>
  <BaseCheckbox
    v-model="event.extras.catering"
    label="Catering"
  />
</div>

<div>
  <BaseCheckbox
    v-model="event.extras.music"
    label="Live music"
  />
</div>

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

GitHub - pidokige02/Vue-3-Form-demo