[Vue] Radio Button

 

radio버튼은 여러개의 선택지 중 하나만 선택할 수 있어야한다.

하지만 각각의 radio 버튼이 독립적으로 만들어져서 모든 radio버튼을 선택이 되는 버그가 발생하였다.

 

여러개의 선택지 중 하나만 선택할 수 있게 하려면 radio버튼들을 그룹화하여 하나의 그룹으로 묶는 방법이 있다.

바로 radio버튼의 속성 중 name 속성을 이용하는 것이다.

 

radio 버튼을 그룹화하기 위해 name속성을 설정하고, 이를 고유한 값으로 설정하면 정상적으로 잘 동작이 된다.

 

 

코드확인하기

  <!-- 설문조사 -->
    <div v-if="viewType === 'KN06' ? true : false" class="surveyWrap">
      <div class="surveyTitle">
        <p class="font-bold">설문 항목 구성</p>
        <CommonButton
          @click="createServeyList"
          class="btn_ic_md btn_pri"
          title="추가버튼"
        >
          <template #leading>
            <Icon name="ic:baseline-add" />
          </template>
        </CommonButton>
      </div>

      <div class="surveyInner">
        <ul>
          <li v-for="(surveyItem, index) in serveyList" :key="index">
            <div class="surveyInnerTop">
              <CommonInput
                v-model="inputValue"
                placeholder=""
                :value="surveyItem.index"
              />
              <CommonInput
                v-model="inputValue"
                placeholder=""
                :value="surveyItem.question"
              />
              <CommonButton
                @click="deleteSurveyList(index)"
                class="btn_ic_md btn_pri_line"
                title="질문삭제"
              >
                <template #leading>
                  <Icon name="ic:baseline-close" />
                </template>
              </CommonButton>
            </div>
            <div class="surveyInnerCont">
              <div>
                <div class="surveySubTitle">
                  <strong>응답 유형</strong>
                  <CommonSelect
                    v-model="surveyItem.tollType"
                    :items="responseItems"
                    :isAll="true"
                    allText="적용안함"
                    @change="handleResponseType(surveyItem.tollType, index)"
                    size="md"
                  />
                </div>
              </div>
              <div>
                <div class="surveySubTitle">
                  <strong>답변 항목 구성</strong>
                  <CommonButton
                    @click="createAnswerList(index, surveyItem.index)"
                    class="btn_ic_md btn_pri"
                    title="추가버튼"
                  >
                    <template #leading>
                      <Icon name="ic:baseline-add" />
                    </template>
                  </CommonButton>
                </div>
                <ul>
                  <li
                    v-for="(item, answerIndex) in surveyItem.answerList"
                    :key="answerIndex"
                  >
                    <CommonSelect
                      v-model="item.type"
                      :items="answerItems"
                      :isAll="true"
                      allText="적용안함"
                      @change="
                        handleAnswerType(
                          item.type,
                          answerIndex,
                          surveyItem.index
                        )
                      "
                      size="md"
                    />
                    aa: {{ testvalue }}
                    <input
                      v-if="
                        surveyItem.tollType === '단일선택' &&
                        item.type === '고정형'
                          ? true
                          : false
                      "
                      type="radio"
                      v-model="testvalue"
                      :options="radioOptions"
                      :name="'radio_' + surveyItem.index"
                    />
                    <!-- <CommonRadio
                      v-if="
                        surveyItem.tollType === '단일선택' &&
                        item.type === '고정형'
                          ? true
                          : false
                      "
                      v-model="testvalue"
                      :options="radioOptions"
                      @click="handleRadioClick(item.radio)"
                      class="md input_radio"
                    /> -->
                    <CommonCheckbox
                      v-if="
                        surveyItem.tollType === '다중선택' &&
                        item.type === '고정형'
                          ? true
                          : false
                      "
                      v-model="item.check"
                    />

                    <CommonInput v-model="item.answer" placeholder="" />
                    <CommonButton
                      @click="deleteAnswerList(answerIndex, surveyItem.index)"
                      class="btn_ic_md btn_pri_line"
                      title="답변삭제버튼"
                    >
                      <template #leading>
                        <Icon name="ic:baseline-close" />
                      </template>
                    </CommonButton>
                  </li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>