[vue3] checkbox 체크박스 관련 이슈정리

1. 체크박스가 동시에 클릭될 때

<input type="checkbox" v-model="ch"/>봄
<input type="checkbox" v-model="ch"/>여름

const ch = ref();

여기서 체크박스를 클릭하면 같은 v-model를 가진 얘들이 자동으로 선택됨.

방지하려면 ref를 array로 써야함.

const ch = ref([]);

근데 라디오버튼은 굳이 []로 안써도 잘됨.

 

 

2. 페이지 로드시 진입시 체크박스 자동 선택되어있게 하기

<template v-for="item in text">
  <input type="checkbox" v-model="ch" :value="item.v">{{item.t}}
</template>

const text = [{t: "봄", v:"spring"},{t: "여름", v:"summer"}]
const ch = ref([])

반복문으로 checkbox를 만들었는데 '봄'을 체크되어있게 하고싶으나 checked를 써놔도 안될때는

const ch = ref([text[0].v])

이렇게 v-model에 기본값을 써주면 됨.

 

근데 라디오버튼은 그냥 html에 checked하면 됨;

 

 

 

---

 

주기적으로 업데이트 예정