如何使用 vue on-click 对列表进行排序并使用 v-bind 在列中添加箭头？答案

【问题标题】：How to sort a list using vue on-click and add an arrow in column using v-bind?如何使用 vue on-click 对列表进行排序并使用 v-bind 在列中添加箭头？
【发布时间】：2023-02-23 22:57:41
【问题描述】：

当我单击相应的列时，我希望数据按升序/降序排序。另外，我需要在列后面有一个箭头来表示顺序。我坚持使用 vue on-click 构建一个函数来对列表进行排序并使用 v-bind 添加箭头。我应该如何处理我的 vue/css/html？这是我的 html

    <div id="app">
      <table>
        <thead>
          <tr></tr>
            <th v-for="(header, key) in column" :key="key" v-on:click="sort(header)" v-bind:class="[sortBy === header ? sortDirection : '']">{{ header }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row in rows" :key="row.id">
            <td>{{ row.id }}</td>
            <td>{{ row.name }}</td>
            <td>{{ row.phone }}</td>
          </tr>
        </tbody>
      </table>
    </div>

和我的 js

var app = new Vue({
  sortBy: "ID",
  sortDirection: "asc",
  el: "#app",
  data: {
    arrow: {
      active: true,
      "text-danger": false,
    },
    column: {
      id: "ID",
      name: "Full Name",
      phone: "Phone",
    },
    rows: [],
  },
  methods: {
    async fetchData() {
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/users"
      );
      const finalRes = await response.json();
      this.rows = finalRes;
    },
    sort(s) {
      if (this.s == this.sortBy) {
        this.sortDirection = this.sortDirection === "asc" ? "desc" : "asc";
      }
      this.sortBy = s;
    },
  },
  computed: {
    sortedProductions: function () {
      return this.rows.sort((p1, p2) => {
        let modifier = 1;
        if (this.sortDirection === "desc") modifier = -1;
        if (p1[this.sortBy] < p2[this.sortBy]) return -1 * modifier;
        if (p1[this.sortBy] > p2[this.sortBy]) return 1 * modifier;
        return 0;
      });
    },
  },
  mounted() {
    this.fetchData();
    this.sort();
    this.sortedProductions();
  },
});

CSS：

table {
  text-align: left;
  font-family: "Open Sans", sans-serif;
  width: 500px;
  border-collapse: collapse;
  border: 2px solid #444777;
  margin: 10px;
}

table th {
  background: #444777;
  color: #fff;
  padding: 5px;
  min-width: 30px;
}

table td {
  padding: 5px;
  border-right: 2px solid #444777;
}

table tbody tr:nth-child(2n) {
  background: #d4d8f9;
}

.asc:after {
  content: "\25B2";
}

.desc:after {
  content: "\25BC";
}

我的预期结果：

【问题讨论】：

标签： javascript html css vue.js

【解决方案1】：

两个将您的问题分成两个问题。

类绑定

您可以添加一个具有不同语法的类

<div :class="{'nameClass': condition}"></div>

在你的情况下它会是这样的：

<div :class="{sortDirection: sortBy === header}"></div>

https://v2.vuejs.org/v2/guide/class-and-style.html

排序

你以正确的方式开始了。但是您没有对方法中的任何内容进行排序。您需要三个条件进行排序。更大，更小，相同。

this.rows.sort(function(x, y) {
  if (x[sortBy] < y[sortBy]) {
    return -1;
  }
  if (x[sortBy] > y[sortBy]) {
    return 1;
  }
  return 0;
});

对于这两种解决方案，可能会有一些小的变化，但我希望概念是清楚的:)

【讨论】：