如何使用 Vue.js 更新祖先元素类以响应子输入更改?

Question

我正在使用 Vue (v2.6.11(，当输入(复选框(的值更改时，我想在输入(复选框(的祖先(祖父(元素上添加/删除一个类。有未知数量的复选框，因此它们是使用我要添加/删除类的元素上的v-for生成的。我在 Vue 实例中注册了一个函数，methods复选框值更改时。

在下面的代码中，<label>是我要添加/删除类以响应复选框值更改的元素。我试图抵制将: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>

仅当该特定复选框为"已接受"为真时，这将应用测试类。