클릭 시 특정 (이) 버튼 클래스를 변경하는 방법Vue.js 2.0 사용
임의의 버튼을 클릭하면, 모두 액티브하게 됩니다.그래서 내가 원하는 것은 클릭된 것만 바꾸면 되는 것이다.
var vm = new Vue({
el: '#toolBtns',
data: {
isActive: false
},
computed: {
activeClass: function () {
return {
active: this.isActive
};
}
}
});<div class="btn-group" role="group" id="toolBtns">
<button class="btn" type="button" @click="isActive = !isActive" :class="activeClass">Btn1</button>
<button class="btn" type="button" @click="isActive = !isActive" :class="activeClass">Btn2</button>
<button class="btn" type="button" @click="isActive = !isActive" :class="activeClass">Btn3</button></div>현재 선택되어 있는 버튼을 찾으려면 변수가 필요할 수 있습니다.또한 이 변수를 사용하여 올바른 클래스를 동적으로 바인딩할 수 있습니다.:class="{active: activeBtn === 'btn1' }".
이 접근방식의 장점은 현재 선택된 버튼을 저장하는 변수가 배열이 아닌 하나의 변수만 있기 때문에 버튼을 선택할 때마다 어레이를 반복할 필요가 없다는 것입니다.
var vm = new Vue({
el: '#toolBtns',
data: {
activeBtn:''
}
});.active{
background-color:red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="toolBtns">
<div class="btn-group" role="group" id="toolBtns">
<button class="btn" type="button" @click="activeBtn = 'btn1'" :class="{active: activeBtn === 'btn1' }">Btn1</button>
<button class="btn" type="button" @click="activeBtn = 'btn2'" :class="{active: activeBtn === 'btn2' }">Btn2</button>
<button class="btn" type="button" @click="activeBtn = 'btn3'" :class="{active: activeBtn === 'btn3' }">Btn3</button></div>
</div>여기서 일하는 바이올린 좀 봐.
isActive: false'를 설정할 필요도 없고 각 항목에 isActive를 바인딩할 필요도 없습니다.다음과 같이 할 수 있습니다.1, '후보'라고 불리는 배열을 선언하면 클릭된 각 항목이 후보 배열에 푸시됩니다.2, 항목이 후보 배열에 있는지 여부를 체크하는 'contains()'라고 하는 함수를 선언합니다.3, 각 항목에 바인드(bind contains(). CSS에서 4는 몇 가지 스타일을 '클릭'합니다.
html 코드:
<body>
<div id="toolBtns">
<button v-for="item in buttons" v-on:click="provide(item)" v-bind:class="{clicked: contains(candidates, item)}" type="button">{{ item.name }}
</button>
</div>
</body>
javascript 코드:
var toolBtns = new Vue({
el: '#toolBtns',
data:
{
buttons: [
{name: 'Btn1'},
{name: 'Btn2'},
{name: 'Btn3'},
],
candidates: [],
},
methods:
{
provide: function(item)
{
if(this.candidates.indexOf(item) == -1)
{
this.candidates.push(item);
}
else
{
this.candidates.splice(this.candidates.indexOf(item), 1);
}
},
contains: function(arr, item)
{
return arr.indexOf(item) != -1;
},
}
});
CSS 코드
.clicked{
background-color: red;
}
다음은 jsfiddle의 예시입니다.https://jsfiddle.net/JoyAndBrave/anzdzq4L/6/
위 솔루션의 방향은 맞지만 인덱스를 직접 사용하기 때문에 오류에 매우 취약합니다.위의 답변에서 제시된 바와 같이 v-for를 실행하면 기본적으로 문제가 해결됩니다.
var vm = new Vue({
el: '#toolBtns',
data: {
buttons:[{name:'Btn1',active:false},{name:'Btn2',active:false},
{name:'Btn3',active:false}]
},
methods: {
toggleActiveClass:function(index){
this.buttons[index].active=!this.buttons[index].active;
}
}
});
<div class="btn-group" role="group" id="toolBtns">
<button v-for="(btn, index) in buttons" type="button"
@click="toggleActiveClass(index)"
:class="{active: btn.active}">{{btn.name}}
</button>
</div>
작업중 : https://jsfiddle.net/z11fe07p/547/
언급URL : https://stackoverflow.com/questions/42062491/how-to-change-a-specific-this-button-class-when-click-on-using-vue-js-2-0
'programing' 카테고리의 다른 글
| C의 동적 다차원 어레이를 사용하는 방법은 무엇입니까? (0) | 2022.07.27 |
|---|---|
| Vue SPA - 브라우저에서 렌더링할 때 .vue 파일을 숨기는 방법 (0) | 2022.07.27 |
| 경로의 File.separator와 슬래시의 차이 (0) | 2022.07.27 |
| Vuex mapState가 어레이가 아닌 개체를 반환합니까? (0) | 2022.07.27 |
| v-sphere가 어레이 컨텐츠의 변경을 감지하지 못함(vue js) (0) | 2022.07.27 |