Vue 3 Forms : BaseRadio - BaseRadioGroup

BaseRadio 

라디오버튼은 체크박스처럼 단일 입력으로 작동하지 않습니다. 라디오 버튼은 라디오 버튼그룹의 일부로 존재하고 기능하며,  각각 라디오버튼은  single  상테를 가지고 있다. 그룹의 상태에 따라, 라디오 버튼은 해당 그룹에 있는 다른 라디오 버튼들과  연계되어서  활성화되거나 비활성화될 수 있습니다.

 

Making it v-model capable

radio buttons don’t bind to the value property, but use the checked property instead.

라디오 버튼은 “value” 속성에 바인딩되지 않고  대신 “checked” 속성을 사용한다.

 

The modelValue of our BaseRadio elements will contain the user’s preference, so either cat or dog — hence we need to be able to tell this radio which one of these values it represents.

BaseRadio 요소의 modelValue에는 사용자의 선호도가 포함된다. 즉  고양이 또는 개 중 하나가 된다. 따라서 우리는 이 라디오가 이러한 값 중 어느 것을 나타내는지 알려줄 수 있어야 한다..

 

BaseRadio.vue

<template>
  <input
      type="radio"
      :checked="modelValue === value"
      :value="value"
      v-bind="$attrs"
      @change="$emit('update:modelValue', value)"
    />
  <label v-if="label">{{ label }}</label>
</template>

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

 

SimpleForm.vue

      <h3>Are pets allowed?</h3>
      <div>
        <BaseRadio
          v-model="event.pets"
          :value="1"
          label="Yes"
          name="pets"
        />
      </div>

      <div>
        <BaseRadio
          v-model="event.pets"
          :value="0"
          label="No"
          name="pets"
        />
      </div>

 

 

Creating our BaseRadioGroup

• component 의 user 가 option array 를 넘겨주어 선택이 가능하게 한다.
• 전달 받은 option object list  prop를 이용하여 loop 를 돌며 각 option object 에 해당하는  BaseRadio component의 creation 이 가능하다.
• option object  는 label value 와 같은 두개의 property 를 가지고 있다.

const radioOptions = [
 { label: 'Gud boi', value: 'dog' },
 { label: 'Angri boi', value: 'cat' }
]

 

브라우저가 이를 알 수 있도록 그룹의 모든 라디오는 동일한 이름을 가져야 한다.

 

BaseRadioGroup.vue

<template>
 <BaseRadio
   v-for="option in options"
   :key="option.value"
   :label="optio.label"
   :value="option.value
   :name="name"
  />
</template>

<script>
export default {
  props: {
   options: {
   type: Array,
   required: true
  },
  
  name: {  // group 안에 있는 radioButton 이 동일한 이름을 갖도록 한다
    type: String,
    required: true
   }
  }
}
</script>

 

Making it v-model capable

BaseRadioGroup.vue

<template>
 	<BaseRadio
 		v-for="option in options"
 		:key="option.value"
 		:label="option.label"
 		:value="option.value"
 		:modelValue="modelValue"
 		:name="name"
 		@update:modelValue="$emit('update:modelValue', $event)"
 	/>
</template>

@update:modelValue="$emit('update:modelValue', $event)"  update:modelValue event 가 발생하였을 때 event 정보를  통째로 넘기는 code 이다.

 

 

SimpleForm.vue

<h3>Are pets allowed?</h3>
<div>
 <BaseRadioGroup
 v-model="event.pets"
 name="pets"
 :options="petOptions"
 />
</div>

petOptions  will be bound to the options prop in our BaseRadioGroup for this set of radios.

petOptions는 이 라디오 세트에 대한 BaseRadioGroup의 options prop에 바인딩됩니다.

 

Allowing different layouts

Now, in order to use our vertical prop we have to wrap our RadioGroup loop in a component of its own. When the radios are vertical we want it to be a div, and when they are horizontal we will use a span.

이제 수직 prop 을 사용하려면 RadioGroup 루프를 자체 구성 요소로 wrapping 해야 한다. 라디오가 수직이면 div을 사용하고, 수평이면 span을 사용합니다.

There are of course many ways to solve this particular problem, but this solution in particular allows me to show you how to leverage the power of <component :is> for your dynamic form components! We will begin by wrapping everything up in a <component> element and moving the v-for loop onto it.

이 문제를 해결하는 방법은 여러 가지가 있지만 특히 이 솔루션을 통해 동적 양식 구성 요소에 대해 <comComponent :is>의 기능을 활용하는 방법을 보여줄 수 있다! 모든 것을 <comComponent> 요소로 래핑하고 v-for 루프를 그 위로 이동하여 구현 할 수 있다.

 

BaseRadioGroup.vue

<template>
  <component
    v-for="option in options"
    :key="option.value"
    :is="vertical ? 'div' : 'span'"
    :class="{
      'horizontal': !vertical
    }"
  >
    <BaseRadio
      :label="option.label"
      :value="option.value"
      :modelValue="modelValue"
      :name="name"
      @update:modelValue="$emit('update:modelValue', $event)"
    />
  </component>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    },
    name: {
      type: String,
      required: true
    },
    modelValue: {
      type: [String, Number],
      required: true
    },
    vertical: {
      type: Boolean,
      default: false
    }
  }
}
</script>

 

SimpleForm.vue

      <fieldset>
        <legend>Pets</legend>

        <p>Are pets allowed?</p>
        <div>
          <BaseRadioGroup
            v-model="event.pets"
            name="pets"
            :options="petOptions"
            vertical="true"
          />
        </div>
      </fieldset>

vertical, horizontal 을 위와 true an false 로 조절 할 수 있다.

 

 

source codes 는 아래 link를 참조. 

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

GitHub - pidokige02/Vue-3-Form-demo