Jquery 在Vue js中单击每个表头时，如何显示升序和降序箭头图像？

我有一个列表页面，数据是使用laravel获取的，当我点击表头时，升序和降序数据的排序将起作用。当排序工作时，我需要显示向下和向上的箭头标记

我的问题是： 目前当我点击一个表头时，所有表头箭头标记向下显示。我的意思是当我点击“客户编号”、“名字”和“姓氏”时，向下和向上显示的箭头标记

实际上我期望的结果是，当我点击一个表格标题时，箭头标记只反映一个。请检查下面给出的图像和代码。任何帮助都将不胜感激

<thead>
 <tr>
    <th v-for="key in columns" @click="sortBy(key)" :class="{active: sortKey == key}">@{{ colTitles[key] }} <span class="arrow" :class="order > 0 ? 'asc' : 'dsc'"></span>
     </th>
 </tr>                   
 </thead>
 <tbody>
        <tr v-for="(index, item) in items | orderBy sortKey order">
            <td>@{{ item.erp_id }}</td>
            <td>@{{item.firstname}}</td>
            <td><a href="{{ url('/customer/details/') }}/@{{ item.id }}">@{{item.lastname}}</a></td>
            <td>@{{item.email}}</td>
            <td>@{{item.phone_1}}</td>
            <td>@{{item.status}}</td>
            <td>@{{item.created_on}}</td>
         </tr>
 </tbody>

style.css

new Vue({
            el: '#app',

            data: {
                sortKey: '',

                order: 1,

                columns: ['erp_id', 'firstname', 'lastname', 'email', 'phone_1', 'status', 'created_on'],

                colTitles: {'erp_id':'Customer No', 'firstname':'First name', 'lastname':'Last name'}
              },

 methods: {
                sortBy: function (key) {
                    this.sortKey = key;
                    this.order   = this.order * -1;
                    //alert(this.order = this.order * -1);
                    //alert(this.sortKey = key);
                    //this.sortOrders[key] = this.sortOrders[key] * -1
                    //order = order * -1
                }
            }
});

<style>
th.active .arrow {
        opacity: 1;
    }

    .arrow {
        display: inline-block;
        vertical-align: middle;
        width: 0;
        height: 0;
        margin-left: 5px;
        opacity: 0.66;
    }

    .arrow.asc {
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 4px solid #42b983;
    }

    .arrow.dsc {
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid #42b983;
    }

    #search {
        margin-bottom: 10px;
    }
</style>

活动箭头{
不透明度：1；
}
.阿罗{
显示：内联块；
垂直对齐：中间对齐；
宽度：0；
身高：0；
左边距：5px；
不透明度：0.66；
}
.arrow.asc{
左边框：4px实心透明；
右边框：4px实心透明；
边框底部：4px实心#42b983；
}
.arrow.dsc{
左边框：4px实心透明；
右边框：4px实心透明；
边框顶部：4px实心#42b983；
}
#搜寻{
边缘底部：10px；
}

如何为每列指定自己的顺序 如果您想给每一列指定其自己独特的排序顺序，则需要为每个顺序存储一个值

下面的代码片段是实现这一点的一种方法。现在，每一列都与

名称

和

顺序

相关联。排序是根据单击表格标题时设置的

activeColumn

的值进行的

此外，我还使排序顺序仅在单击箭头时更改。这样，当选择新标题时，排序顺序并不总是改变

var-app=新的Vue({
el:“#应用程序”，
数据：{
activeColumn:{}，
栏目：[
{name:'firstname'，顺序：1}，
{name:'lastname'，顺序：1}，
{name:'email'，订单：1}，
],
colTitles:{'firstname'：'firstname'，'lastname'：'lastname'，'email'：'email'}，
项目：[
{firstname:'aaa'，lastname:'ccc'，email:'eee'}，
{firstname:'bbb'，lastname:'ddd'，email:'ddd'}，
{firstname:'ccc'，lastname:'eee'，email:'aaa'}，
{firstname:'ddd'，lastname:'aaa'，email:'ccc'}，
{名字：'eee'，姓氏：'bbb'，电子邮件：'bbb'}，
]
},
});
th.active.箭头{
不透明度：1；
}
.阿罗{
显示：内联块；
垂直对齐：中间对齐；
宽度：0；
身高：0；
左边距：5px；
不透明度：0.66；
}
.arrow.asc{
左边框：4px实心透明；
右边框：4px实心透明；
边框底部：4px实心#42b983；
}
.arrow.dsc{
左边框：4px实心透明；
右边框：4px实心透明；
边框顶部：4px实心#42b983；
}

{{colTitles[column.name]}
{{item.firstname}
{{item.lastname}
{{item.email}
活动列：{{activeColumn|json}
如果我误解了你的问题，请留下评论。