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时代，我只是将clicked元素的父对象作为目标，找到所有列并从中删除该类，但是如果我不能（或不应该）将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。

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

1 个答案: