v-for 이용한 각 체크박스 경로 지정하기

v-for를 이용해 체크 박스와 클릭 시 경로 이동이 되도록 구현하려고 함.

여기서 문제는 반복되는 태그에 각각 따로 경로를 지정해야 하는데 그 부분에 대해 기록하려고 함.

 

vue.js

<div class="chk-grp">
  <div
    v-for="(item, idx) in check_list"
    :key="idx"
    class="input flex justify-b mb-16"
  >
    <div class="grp">
      <input
        :id="`agree0${idx + 1}`"
        type="checkbox"
        class="is-none toggle-switch"
      >
      <label
        :for="`agree0${idx + 1}`"
        class="label-chk-01"
      >{{ item }}</label>
    </div>
    <button
      type="button"
      class="btn btn-underline f-r"
      @click="navigateToPage(item)"
    >
      내용확인
    </button>
  </div>
</div>

 

 

script

data () {
    return {
      check_list: [
        '(필수) 이용약관', '(필수) 개인정보 수집 동의', '(선택) 마케팅수신동의',
      ],
    };
},

methods: {
	navigateToPage (item) {
      if (item === '(선택) 마케팅수신동의') {
        alert('준비 중입니다');
      } else {
        const pageName = this.mapItemToRouteName(item);
        if (pageName) {
          this.$router.push({ name: pageName });
        }
      }
    },
    mapItemToRouteName (item) {
      const routes = {
        '(필수) 이용약관': 'Terms', // router name 추가
        '(필수) 개인정보 수집 동의': 'Privacy',
        '(선택) 마케팅수신동의': '',
      };

      return routes[item];
    },
},

 

이런 식으로 rotuer name을 추가하여 경로 이동이 가능하도록 했는데,

label이 변경되는 경우 스크립트에서도 텍스트를 수동으로 바꿔줘야 한다는 아쉬움이 있다.