单击时如何更改特定（此）按钮类。使用 Vue.js 2.0答案

【问题标题】：How to change a specific (this) button class when click on. Using Vue.js 2.0单击时如何更改特定（此）按钮类。使用 Vue.js 2.0
【发布时间】：2017-06-23 01:58:32
【问题描述】：

当单击任何按钮时，它们都会变为活动状态。所以我想要的只是应该改变点击的那个。

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 bind vuejs2 vue.js

【解决方案1】：

您可能需要一个变量来查找当前选择了哪个按钮。您可以使用该变量动态绑定正确的类：with：: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>

见工作小提琴here。

【讨论】：

谢谢Saurabh，我会对你建议的方法做一些研究，我会尝试在这里分享结果。上述情况还是有问题的。所以它没有工作。
看看下面的评论和一个工作小提琴:)
谢谢@Saurabh。是的，我们可以说这个方案在目前的情况下更加有效。
@Saurabh 也许你可以帮忙。看看这个：stackoverflow.com/questions/52566362/…

【解决方案2】：

您不需要设置'isActive: false'，也不需要将isActive绑定到每个项目。你可以这样做： 1，声明一个数组，称为'candidates'，然后每个点击的项目将被推送到候选人中。 2，声明一个名为“contains()”的函数，它检查一个项目是否在候选数组中。 3、将 contains() 绑定到每个项目。 4、在CSS中，给'clicked'一些样式。

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/

【讨论】：

【解决方案3】：

上述解决方案的方向是正确的，但由于它直接使用索引，因此很容易出错。正如上面的答案所建议的，做一个 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/

【讨论】：

谢谢Cristi Jora :) 解决方案成功。但每次点击只需激活一个按钮。
哦，没读过。然后在 toggleActiveClass 上，您只需要禁用所有其他按钮 :) 小提琴：jsfiddle.net/z11fe07p/549
谢谢。解决方案正是我想要的