Как изменить определенный (этот) класс кнопки при нажатии. Использование Vue.js 2.0

При нажатии любой из кнопок они все становятся активными. Так что я хочу, просто щелкнув, нужно изменить.Как изменить определенный (этот) класс кнопки при нажатии. Использование Vue.js 2.0

var vm = new Vue({ 
 
\t el: '#toolBtns', 
 
\t data: { 
 
\t \t isActive: false 
 
\t }, 
 
\t computed: { 
 
\t \t activeClass: function() { 
 
\t \t \t return { 
 
\t \t \t \t active: this.isActive 
 
\t \t \t }; 
 
\t \t } 
 
\t } 
 
});

<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>

источник

2017-02-06 radeveloper

Вы, наверное, нужна переменная, чтобы найти кнопку, которая в данный момент выбран. И вы можете использовать эту переменную для динамического связывания правильного класса: с: :class="{active: activeBtn === 'btn1' }".

Преимущество этого подхода заключается в том, что у вас есть только одна переменная вместо массива, чтобы сохранить выбранную кнопку, поэтому вам не нужно перебирать массив каждый раз, когда вы выбираете кнопку.

var vm = new Vue({ 
 
\t el: '#toolBtns', 
 
\t data: { 
 
    \t \t activeBtn:'' 
 
\t } 
 
});

.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>

См работает скрипку here.

источник

2017-02-06 07:39:35 Saurabh

Спасибо вам Саурабх, Я сделаю некоторое исследование по предложенному методу, и я постараюсь поделиться этим результатом. Вышеуказанная ситуация по-прежнему проблематична. Так что это не сработало. – radeveloper

См. Комментарий ниже, с рабочей скрипкой :) –

@radeveloper Смотрите эту скрипку с минимальным кодом: https://jsfiddle.net/9y02qo6a/ – Saurabh

Направление решения выше верно, но оно очень уязвимо для ошибок, поскольку оно напрямую использует индексы. Как было предложено в ответе выше, выполнение 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/

источник

2017-02-06 08:08:10

Спасибо Cristi Jora :) Решение успешно. Но только одна кнопка должна быть активной в каждом клике. – radeveloper

Ох не читал об этом. Затем на toggleActiveClass вам просто нужно отключить все остальные кнопки :) Fiddle здесь: https://jsfiddle.net/z11fe07p/549/ –

Спасибо. Решение - именно то, что я хочу – radeveloper

Вам не нужно устанавливать «IsActive: ложь», и вам не нужно связывать IsActive к каждому из пунктов. вы можете сделать следующее: 1, объявить массив, называемый «кандидатами», затем каждый нажатый элемент будет помещен в кандидатов. 2, объявите функцию, называемую 'contains()', которая проверяет, находится ли элемент в массиве кандидатов. 3, bind содержит() для каждого элемента. 4, в CSS, дайте «щелкнуть» какой-то стиль.

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/

источник

2017-11-17 10:03:55

Как изменить определенный (этот) класс кнопки при нажатии. Использование Vue.js 2.0

ответ

Смежные вопросы