操作从v-for创建的复选框

Question

这是我第一次发帖，很抱歉给您带来不便。

我对vue js有问题，也就是它的组件操作。我正在从一个数组中创建一些复选框，其中有一个名为"属性"的String和一个称为"已检查"的布尔值。

这是我的阵列：

checkedRequests: [
{
property: 'cid',
checked: true
},
{
property: 'companyName',
checked: true
},
{
property: 'gln',
checked: true
},
{
property: 'address',
checked: true
},
]

这是我的vuediv:

<div class="checkDiv" v-for="item in checkedRequests" :key="item.property">
<input type="checkbox" id="item.property" v-model="item.checked">
<label for="item.property">{{ item.property }}</label>
<br>
</div>

我的问题是，当我尝试选中或取消选中任何框时，只有我的第一个属性被操纵，例如"cid"。换句话说：例如，如果我点击地址将checked切换为false，"cid"将切换。数据传输正确，但由于Array为false，复选框总是不正确的。

提前感谢！

Answer 1

现在有id="item.property"和for="item.property"作为字符串，使用绑定:id="item.property"和:for="item.property"应该可以解决问题

<div class="checkDiv" v-for="item in checkedRequests" :key="item.property">
<input type="checkbox" :id="item.property" v-model="item.checked" />
<label :for="item.property">{{ item.property }}</label>
<br />
</div>