VueJs 中的动态类和颜色绑定?

Question

我有这个自定义排序方法，在我的div 上将它们排列成升序或降序。我的问题是我如何才能默认将图标颜色变灰，并且只有在您单击该图标后，它才会变成黑色，而其他图标则保持灰色，就像 vuetify 数据表提供 https://v15.vuetifyjs.com/en/components/data-tables 一样。

这是我笔的链接。

new Vue({
el: '#app',
data() {
return {
headers: [{
text: "Name",
value: "name"
}, // changed this to name
{
text: "Grades",
value: "grades"
}
],
labels: ["Andy", "Max", "John", "Travis", "Rick"],
Grades: [99, 72, 66, 84, 91],
sortKey: "", // added a sortKey,
direction: 1
}
},
computed: {
tableItems() {
let retVal = this.labels.map((label, i) => {
return {
name: label,
grades: this.Grades[i]
};
});
// if there is a sortKey use that
if (this.sortKey) {
retVal.sort((a, b) =>
this.direction * // here multiply by the direction
(a[this.sortKey] < b[this.sortKey] ? -1 : 1)
);
}
return retVal;
}
},
methods: {
sortBy(prop) {
if (this.sortKey === prop) {
this.direction *= -1 // change direction to -ve or positive
}
this.sortKey = prop;
console.log(prop);
}
}
})

<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app id="inspire">
<v-container>
<v-layout>
<v-flex v-for="header in headers" :key="header.text" xs4 py-1>
<span>
{{ header.text }}
<v-icon small @click="sortBy(header.value)">arrow_upward</v-icon>
</span>
</v-layout>
<v-layout v-for="item in tableItems" :key="item.name">
<v-flex xs4 py-1>
<span>{{ item.name }}</span>
</v-flex>
<v-flex xs4 py-1>
<span>{{item.grades}}</span>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>

我正在尝试复制 vuetify 数据表提供的内容，但我无法弄清楚如何将颜色绑定到图标。 我只想设置图标的颜色，然后在根据标题值单击时将其更改为黑色或灰色。

Answer 1

这是低技术含量的，但您可以使用(动态，绑定(类名来控制颜色，该类名关闭测试sortKey的方法(在图标本身或父元素上(。

分叉笔

:class="{ current: sortKey == header.value }"

Answer 2

你可以创建一个方法...

sortIconClass(val) {
return (this.direction===1 && val===this.sortKey)?'black--text':'grey--text'
}

并像...

<v-icon small @click="sortBy(header.value)" :class="sortIconClass(header.value)">arrow_upward</v-icon>

代码演示

对于图标，您可以执行类似操作...

<v-icon small @click="sortBy(header.value)" :class="sortIconClass(header.value)">{{sortIcon(header.value)}}</v-icon>
sortIcon(val) {
return (this.direction===1 && val===this.sortKey)?'arrow_upward':'arrow_downward'
}

更新的代码

Answer 3

图标本身是一个具有自己状态的组件，您可以执行相同的操作，创建一个文件组件 Icon.vue，然后将其导入到您正在使用的 vue 实例中

<template>
<i @click="setActive" v-bind:class="{ active: isActive }"></i>
</template>
<script>
data() {
return {
active: false
}
},
methods: {
setActive() {
active = true
}
},
computed: {
isActive() {
return active
}
}
</script>
<style scoped>
.active {
/* do whatever */
}
</style>

进口：

import Icon from 'wherever/icon/is.vue'
/* ... */
components: {
'icon': Icon,
}