不能在vue js中应用样式/类，而在循环中使用它

Question

这是我的代码。项。fav最初为false，但当我点击按钮时，它变为true，我希望图标的颜色为紫色。喜欢是真的。但是这行不通。

<template>
<v-container fluid>
<v-row>
<v-col v-for="(item, index) in items">
<v-btn icon @click='changeFav(item)'>
<v-icon :style='{color:`${fillcolor(item)}`}'>mdi-heart</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
....,
methods: {
fillcolor(item){
return item.fav ? 'purple' : 'orange';
},
changeFav(item){
item.fav=true;
},
}
</script>

我也尝试过使用类

.....
<v-icon class='{fillColor: item.fav}'>mdi-heart</v-icon>
.....
<style>
.fillColor {
color: 'purple';
}
</style>

在使用数据变量作为状态变量,但我不能使用它在这里有一个循环。

我在这里做错了什么，或者我如何做得更好?

Answer 1

看看类和样式绑定

下面是一个例子

<script setup>
import {ref} from 'vue'
const changeFav = (item) => {
item.fav = !item.fav;
}
const items = ref([
{name: "test1", fav: false},
{name: "test2", fav: false},
{name: "test3", fav: true},
{name: "test4", fav: false},
{name: "test5", fav: false},
{name: "test6", fav: false},
{name: "test7", fav: false},
])
</script>
<template>
<div v-for="(item, index) in items" :key="index" @click="changeFav(item)" >
<span :class="[item.fav ? 'orange' : 'purple']">
{{item.name}}
</span>
</div>
</template>
<style >
.purple {
color: purple;
}
.orange {
color: orange;
}
</style>

Answer 2

您的代码的问题是，您的fillcolor方法需要在每次点击上运行，但相反，您调用的changeFav方法只触发item.fav和fillcolor方法从未运行。

所以，你也需要调用这个函数，通过改变你的代码:

<v-container fluid>
<v-row>
<v-col v-for="(item, index) in items" :key="index">
<v-btn icon @click="changeFav(item)">
<v-icon :style="{ color: `${fillcolor(item)}` }">mdi-heart</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>

export default {
....,
methods: {
fillcolor(item) {
return item.fav ? "purple" : "orange";
},
changeFav(item) {
item.fav = true;
return this.fillcolor(item)
},
},
}

================================================================但我更喜欢这样写:

<template>
<v-app>
<v-container fluid>
<v-row>
<v-col v-for="(item, index) in items" :key="index">
<v-btn icon @click="item.fav = !item.fav">
<v-icon :color="item.fav ? 'purple': 'red'">mdi-heart</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
</v-app>
</template>

虽然,这取决于您正在处理数据的方式。例如，如果您正在使用vuex，那么您应该考虑使用mutations。我假设您拥有这些项目，并且可以像这样简单地处理它们:

export default {
data: () => ({
items: [
{ name: "t1", fav: false },
{ name: "t2", fav: false },
{ name: "t3", fav: false },
{ name: "t4", fav: false },
{ name: "t5", fav: false },
{ name: "t6", fav: false },
{ name: "t7", fav: false },
],
}),
};