Vue将类添加到目标但从其他实例中删除

Question

我正在尝试在 Vue 中创建一个可排序的表格组件，并且一切正常，但我只想添加一些小的收尾工作，我想要的一件事是向当前正在排序的列添加一个类并将其删除从所有其他专栏，但我无法弄清楚如何做最后一部分。我一直在读一些文章，说我不应该尝试在 Vue 中定位 DOM 元素，这也让我认为我对 event.target.classList.add() 的使用也不正确。

这是我现在的方法：

  methods: {
    sort_column (event, index) {
      if (this.sortAsc) {
        event.target.classList.add('sortable--down')
        this.sortAsc = false
        return this.tableData.sort((a, b) => {
          if (a[index] < b[index]) return -1;
          if (a[index] > b[index]) return 1;
          return 0;
        })
      } else {
        event.target.classList.add('sortable--up')
        this.sortAsc = true
        return this.tableData.sort((a, b) => {
          if (a[index] > b[index]) return -1;
          if (a[index] < b[index]) return 1;
          return 0;
        })
      }
    },
  }

这就是它的名字：

  <th v-for="(item, index) in headings" :key="index" 
  @click="sort_column($event, index)"">

回到 jQuery 时代，我只会定位被点击元素的父元素，找到所有列并从中删除类，但如果我不能（或不应该）在 Vue 中定位 DOM 元素，那么我不知道该怎么做。

Answer 1

我唯一想到的就是像这样用 Vue 分配课程。 https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax

存储已排序列的索引（在本示例中名为 idxSorted 的变量中），然后执行（已测试）：

<th :class="{ sorted: (index === idxSorted) }" v-for="(item, index) in headings" :key="index" @click="sort_column($event, index)"">

您可以以相同的方式分配sortable--down 和sortable--up 类，并额外检查sortAsc。