我想跟踪几个按钮的状态,而不需要每个按钮都有一个跟踪变量和函数。
所以我想把一个参数传递给一个计算属性,类似这样:
<div class="grid grid-cols-5 text-sm my-3">
<div @click="toggleShow('weapon')" :class="showStyle('weapon')">Weapon</div>
<div @click="toggleShow('armor')" :class="showStyle('armor')">Armor</div>
<div @click="toggleShow('ring')" :class="showStyle('ring')">Ring</div>
<div @click="toggleShow('amulet')" :class="showStyle('amulet')">Amulet</div>
<div @click="toggleShow('horse')" :class="showStyle('horse')">Horse</div>
</div>
字符串
然而,这两种方法都不起作用:
const showStyle = (category: string) =>
computed(() => {
if (show.value.get(category)) {
return "bg-green-700";
} else {
return "bg-red-700";
}
});
// I am not redeclaring in my real code, this is just in the same block for demonstration
// gives error $setup.showStyle is not a function
const showStyle = computed((category) => {
if (show.value.get(category)) {
return "bg-green-700";
} else {
return "bg-red-700";
}
});
型
我用一张Map来追踪每一面旗帜:
const show = ref(new Map());
show.value.set("weapon", true);
show.value.set("armor", true);
show.value.set("ring", true);
show.value.set("amulet", true);
show.value.set("horse", true);
show.value.set("potion", false);
型
而toggle函数似乎正在交换值:
function toggleShow(category: string) {
alert(show.value.get(category));
show.value.set(category, !show.value.get(category));
}
型
我想避免的是为每个类别使用单独的computed()
值,而是传入参数。
这可能吗?怎么可能?
1条答案
按热度按时间gojuced71#
你可以通过从它返回一个函数来参数化计算属性,比如:
字符串
这很好用,但它没有比标准函数更多的好处:
型
您可以从Estus Flask检查this answer以获得更多解释。