Question

如何切换活动班级，即，如果我单击该元素，则应将活动班级添加到该项目中，并从另一个项目中删除。

<th @click="sort('campaign')" class="initial" :class="{active: isActive}">Campaign</th> // here i am toggling class
<th @click="sort('time')" class="initial" :class="{active: isActive}">Time</th>
<th @click="sort('views')" class="initial" :class="{active: isActive}">Views</th>
<th @click="sort('visitors')" class="initial" :class="{active: isActive}">Visitors</th>
<th @click="sort('ctr')" class="initial" :class="{active: isActive}">CTR</th>
<th @click="sort('cpc')" class="initial" :class="{active: isActive}">CPC</th>
<th @click="sort('cpv')" class="initial" :class="{active: isActive}">CPV</th>
<th @click="sort('cpm')" class="initial" :class="{active: isActive}">CPM</th>
<th @click="sort('status')" class="initial" :class="{active: isActive}">Status</th>

data(){
  return{
    isActive: false
   }
}

sort(s) {
  //if s == current sort, reverse
  this.isActive = !this.isActive;
  if(s === this.currentSort) {
  this.currentSortDir = this.currentSortDir==='asc'?'desc':'asc';}
  this.currentSort = s;
}

当我单击时，班级将切换所有项目。也许我应该制造一个组件，使其具有局部状态。

Answer 1

您必须将元素与当前的sort属性链接。从我的角度来看，您可能没有提供完整的组件代码（除了正在使用的currentSort之外，其他任何地方都看不到），但是考虑到currentSort拥有排序类型名称，这是可行的。

<th @click="sort('campaign')" class="initial" :class="{active: isActive}">Campaign</th>

更改为：

<th @click="sort('campaign')" class="initial" :class="{active: currentSort === 'campaign'}">Campaign</th>

这就足够了，现在不需要isActive。但是，您将必须在所有th中对此进行硬编码。更好的解决方案是创建名为sortingTypes和activeIndex的属性：

data() {
  return {
    ...
    sortingTypes: ['campaign', 'time', 'view', 'etc'],
    activeIndex: null
  }
}

然后稍微更改模板：

<th v-for="(sortType, index) in sortingTypes" @click="sort(sortType, index)" class="initial" :class="{active: index === activeIndex}">{{sortType}}</th>

和您的sort方法：

sort(s, index) {
  this.activeIndex = index;
  if(s === this.currentSort) {
  this.currentSortDir = this.currentSortDir==='asc'?'desc':'asc';}
  this.currentSort = s;
}

Answer 2

谢谢！为我工作。对于测试，您可以添加 css ：

.active {
  color: rgb(150, 12, 12);
}

切换活动类Vue js

2 个答案: