Vue3中如何通过类绑定传递参数并动态改变按钮颜色？及类绑定报错问题求助

这个问题很常见——你把计算属性（computed）当成方法（method）来调用啦！计算属性默认是不能直接接收参数的，所以当你在模板里写isActiveClass('her')的时候，Vue会把它当成一个方法去查找，结果发现它是个计算属性，就会抛出这个类型错误。

下面给你两种可行的解决办法：

方法一：把计算属性改成方法（最直接） #

既然你需要给这个逻辑传参数，那直接把computed换成methods就可以了，逻辑完全不用改：

<template>
<div class="step-wrap">
<button :class="isActiveClass('her')" @click="getButtonActive('her'); isActiveBtn='her' ">For Her</button>
<button :class="isActiveClass('him')" @click="getButtonActive('him'); isActiveBtn='him' ">For Him</button>
<button :class="isActiveClass('kids')" @click="getButtonActive('kids'); isActiveBtn='kids' ">For Kids & Teens</button>
</div>
</template>

<script>
export default {
data() {
return {
isActiveBtn:null,
activeClass:'disabled'
}
},
// 把computed换成methods
methods:{
isActiveClass(value) {
if(value === this.isActiveBtn) {
return 'active';
} else {
return 'disable'
}
}
}
}
</script>

方法二：让计算属性返回一个函数（保留computed的写法） #

如果你非要用计算属性，也可以让它返回一个接收参数的函数，这样就能在模板里传参调用了：

<template>
<div class="step-wrap">
<button :class="isActiveClass('her')" @click="getButtonActive('her'); isActiveBtn='her' ">For Her</button>
<button :class="isActiveClass('him')" @click="getButtonActive('him'); isActiveBtn='him' ">For Him</button>
<button :class="isActiveClass('kids')" @click="getButtonActive('kids'); isActiveBtn='kids' ">For Kids & Teens</button>
</div>
</template>

<script>
export default {
data() {
return {
isActiveBtn:null,
activeClass:'disabled'
}
},
computed:{
isActiveClass() {
// 返回一个函数，接收value参数
return (value) => {
if(value === this.isActiveBtn) {
return 'active';
} else {
return 'disable'
}
}
}
}
}
</script>

另外提个小建议：你模板里的@click事件里写了两个语句，其实可以把逻辑合并到getButtonActive方法里，这样模板更简洁——比如在getButtonActive里直接给isActiveBtn赋值，就不用在模板里单独写isActiveBtn='her'啦。

内容的提问来源于stack exchange，提问作者user3718511