如何在vue 3中通过类绑定参数并相应地改变按钮的颜色?

Question

我在使用Vue类绑定更改按钮的颜色时遇到了问题。它抛出了一个Uncaught (in promise) TypeError: $options。isActiveClass不是一个函数。有人能帮帮我吗?

我的代码

<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 &amp; Teens</button>
</div>
</template>

这里是我的脚本代码

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

}

}

</script>

Answer 1

未经测试，但我会尝试这样做:

<script>
export default {
data() {
return {
isActiveBtn:null,
activeClass:'disabled'
}
},
methods:{
isActiveClass(value) {
return {
active: value === this.isActiveBtn,
disable: value !== this.isActiveBtn
}
}

}

}
</script>

EDIT:
方法不是响应式的，上面的方法之所以有效，是因为它重新呈现了模板，因此再次调用了该方法。更好的方法是完全删除该方法，只使用模板，像这样:

<template>
<div class="step-wrap">
<button :class="{active: isActiveBtn === 'her', disable: isActiveBtn !== 'her'}" @click="isActiveBtn='her'">For Her</button>
<button :class="{active: isActiveBtn === 'him', disable: isActiveBtn !== 'him'}" @click="isActiveBtn='him'">For Him</button>
<button :class="{active: isActiveBtn === 'kids', disable: isActiveBtn !== 'kids'}" @click="isActiveBtn='kids'">For Kids &amp; Teens</button>
</div>
</template>

Answer 2

computed:{
isActiveClass() {
return (value) => {
if(value === this.isActiveBtn)
{
return 'active';
}
else {
return 'disable'
}
}

}
}