如何使用Vue.js更新祖先元素类以响应子输入的变化？

Question

我正在使用Vue(v2.6.11)，我想在一个输入(复选框)的祖先(祖父母)元素的值被改变时，添加删除一个类。有一个未知数量的复选框，所以它们是用以下方法生成的 v-for 的元素上添加remove该类。我在Vue实例中注册了一个函数。methods 当复选框的值被改变时。

在我下面的代码中， <label> 是元素，我想在复选框的值发生变化时添加remove类。我正在努力抵制应用一个 :id 属性到标签，然后在我的 updateCounter 方法，将使用 id 的复选框中找到标签并使用纯JS添加删除类。有什么更像Vue的方法吗？

<label class="item"     
    v-for="item in myItems"
    v-bind:key="item.id"
    :for="'item'+item.id">

    <div>
        <input type="checkbox"
            :id="'item'+item.id"
            v-model="item.isAccepted" 
            @change="updateCounter($event)" />

        <span>{{ item.name }}</span>
        <span>{{ item.status }}</span>
    </div>

    <div>{{ item.date }}</div>

</label>

Answer 1

就用一个动态类，像这样。:class="item.applyClass ? 'item' : ' ' " 在项目上设置一个属性，然后你就可以在你的动态类中动态地改变这个属性 updatedCounter 功能

Answer 2

你可以做

<label class="item"     
v-for="item in myItems"
v-bind:key="item.id"
:for="'item'+item.id"
:class="{test: item.isAccepted === true}">

<div>
    <input type="checkbox"
        :id="'item'+item.id"
        v-model="item.isAccepted" 
        @change="updateCounter($event)" />

    <span>{{ item.name }}</span>
    <span>{{ item.status }}</span>
</div>

<div>{{ item.date }}</div>

只有当该特定复选框的 "接受 "为真时，才会应用测试类。