[vue.js] v-for 이용하여 radio 설정 및 v-model 데이터 관리

서론

vue.js 개발하면서 자주 사용하는 radio html 설정 및 v-model 데이터 관리를 정리한다.

html

<template>
  <div class="text-center">
    <div v-for="(item, index) in radioList" :key="index">
      <input type="radio" :id="item.key" v-model="picked" :value="item" />
      <label :for="item.key" class="text">{{ item.value }}</label>
    </div>
    <br />
    선택한 key : {{ picked.key }}
    <br />
    선택한 value : {{ picked.value }}
  </div>
</template>

 

설명

v-for를 이용하여 radioList를 반복하여 input & label를 노출

input - value는 picked에 set할 데이터를 선언한다.

* picked에 key값만 넣고 싶다면 :value="item.key" 로 선언하여 사용한다.

input - id 와 label - for는 동일값을 선언하여 click 영역을 동일화한다.

input - v-model은 radio click시 input - value 값을 받을 data을 선언한다.

 

script

<script>
export default {
  data() {
    return {
      radioList: [
        {
          key: "00",
          value: "10세미만",
        },
        {
          key: "01",
          value: "10~19세",
        },
        {
          key: "02",
          value: "20~29세",
        },
        {
          key: "03",
          value: "30~39세",
        },
        {
          key: "04",
          value: "40~49세",
        },
        {
          key: "05",
          value: "50~59세",
        },
        {
          key: "06",
          value: "60세이상",
        },
      ],
      picked: "",
    };
  },
  mounted() {
    // radio data 초기 set
    this.picked = this.radioList[0];
  },
  watch: {
    picked() {
      console.log("watch : ", this.picked);
      this.getSearch();
    },
  },
  methods: {
    getSearch() {
      console.log("api getSearch!!!");
    },
  },
};
</script>

data

radio에 사용할 radioList

click시 데이터를 받을 picked

mounted

radio에 초기에 선택을 하기 위한 선언(초기 값이 필요 없을때는 사용x)

 

watch

radio 선택시 api검색을 위해 감지

 

methods

radio 클릭시 호출할 method. 보통 api를 호출하던지 다른 조건을 처리하기 위해 적용.

확인

 

 

정리

오늘은 vue radio에 대해 정리해보았습니다. 추후 더 많은 사용 방법이 있다면 추가 할 예정입니다.

 

* 테스트 소스 : https://github.com/hjh830827/test-project1/blob/master/src/views/RadioClickTest.vue 에서 확인 가능합니다.