[Vue.js] 체크박스 선택 시 효과주기

 

◽ 개요

<input>의 id 속성과 <label>의 for 속성의 value를 같은 값으로 연결하면, <label> 클릭 시 체크박스가 "clicked" 상태가 된다.
아래 코드와 같다.

<!-- 이렇게 id와 for에 같은 값을 할당하여 서로 연결할 수 있다. -->
<input type=“checkbox” id=“test” />
<label for=“test”>클릭</label>

나의 경우 아래와 같이 이미지를 클릭할 때 해당 이미지의 체크박스가 클릭되도록 만들었다.

그리고 이미지를 클릭하면 <img> 태그에 노란색 선을 추가해서 클릭한 효과를 주도록 했다.

 

 

 

---

 

 

◽ 적용 순서

1. v-model로 데이터를 연결하고, 클릭 시 해당 체크박스의 value는 prodArr에 차례대로 들어간다.
2. prodArr을 검사하는 ‘checked’ 메소드를 통해 prodArr에 해당 value가 있는지 검사한다.
3. :class=“checked(item.name)”에서 return 값에 따라 checked 속성이 동적으로 할당된다.

 

📄 HTML

// v-for로 아래와 같이 체크박스를 뿌려준다.
// v-model로 prodArr이라는 변수에 클릭할 때 마다 value를 바인딩한다.
<div v-for="item in checklist">
   <input type=“checkbox”
      :id=“item.no”
      v-model=“prodArr”
      :value=“item.name”
      :class=“checked(item.name)”
   />
   <label :for=“item.no”>
      <img :src=“item.image_name”>
   </label>
</div>

 

📄 Script

data() {
  return {
    // v-model로 연결한 선택한 상품 배열
    prodArr: [] 
  }
},
methods: {
  checked(target) {
    // prodArr에 해당 값이 포함되어있는지 확인하여 checked라는 클래스를 동적으로 부여한다.
    const index = this.prodArr.indexOf(target)
    return index >= 0 ? { checked: true } : { checked: false }
  }
}

 

📄 CSS

/*
  인접한 형제요소인 label의 하위요소인 img 태그에 접근한다.
  체크된 경우 이미지에 border를 준다.  
*/
input.checked + label > img {
  border: 4px solid rgb(255, 242, 65);
  box-sizing: border-box;
}

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.