Question

我有这个网站，该网站获取一些布尔值并将它们存储在键= id和值=布尔值的数组中。

例如

policiesActive[
"2"   => false,
"3"   => false]

我有一个包含三个项目的列表组。

例如

.list-group
    a.list-group-item.list-group-item-action.flex-column.align-items-start(v-for='firewallPolicy in activeFirewall.policies', href='', @click.prevent='setPolicyActive(activeFirewall.id, firewallPolicy.id)', v-bind:class='{ active: policiesActive[firewallPolicy.id] }')
        .d-flex.w-100.justify-content-between
        h5.mb-1 {{firewallPolicy.name}}
        p.mb-1 {{firewallPolicy.description}}

应检查每个列表组项目是否处于活动状态。如果两个policiesActive都为假，则将前两个与policiesActive进行比较，第三个为true。

我不知道如何检查两个值都为假的最后一部分。

希望你能帮助我。

Answer 1

最直接的方法可能是使用一种方法来计算类。这是简化版

<a
    v-for="(policy, index) in policies"
    class="list-group-item"
    :class="getItemClass(policy, index)"
    href="..."
>
    ...
</a>

然后

methods: {
    getItemClass(policy, index) {
        let itemClass = "";
        // ... whatever logic you want to calculate the classname
        return itemClass;
    }
}

vue绑定类，如果值等于false

1 个答案: