"check"라는 클래스를 만들었습니다. 클래스는 선택한 상자를 노란색으로 바꿔야합니다. 내 문제는 클릭을하면 선택한 상자뿐만 아니라 모든 반복 된 상자가 노란색으로 바뀐다는 것입니다.
<template>
<div>
<!--iterated object-->
<div class="main" v-for="rr,index in object">
<p class="paragraph">{{rr.genre}}</p>
<!-- check box iterated with the object-->
<div :class="{'checkBox':true, check:checked}" @click="work(index)"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
object:[],
checked:false
}
, mounted() {
axios.get("/maria")
.then(response => this.object = response.data);
},
methods: {
work(index) {
this.checked=!this.checked
}
}
}
</script>
checked와 클릭 된 행 사이에 약간의 관계가 있어야합니다 . 예를 들어 checked다음 id과 같이 마지막으로 클릭 한 항목 의 색인과 같거나 더 나아지 도록합니다.
methods: {
work(index) {
this.checked = index
}
}
클래스 적용 조건을 수정합니다.
<div :class="{'checkBox':true, check: checked == index}" @click="work(index)"></div>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다