具有复选框 ID 冲突的 Vue.js 组件[重复]

Question

我有一个自定义的 Vue 组件 (vcheck)，它有一个带有标签的复选框：

<input 
    v-model="val" 
    type='checkbox' 
    :true-value="trueValue" 
    :false-value="falseValue"
    id="v-check"
>
<label for="v-check">{{val == trueValue ? displayChecked : displayUnchecked}}</label>

但问题是当我有多个实例（在父组件中）时，复选框的 ID 会发生冲突：

<vcheck v-model="val1" display-checked="Yes" display-unchecked="No"></vcheck>
<vcheck v-model="val2" display-checked="Tested" display-unchecked="Untested"></vcheck>

因此，当我单击第二个复选框标签时，第一个会更改（因为它们都具有相同的 ID）。目前我删除了 ID，只在标签上使用了 @click 事件。但是有没有办法为组件的每个实例生成唯一的 ID？

Answer 1

一种选择是将 id 也作为道具传递给 vcheck：

<vcheck v-model="val1" display-checked="Yes" display-unchecked="No" id="123">
</vcheck>

并将其用于复选框：

<input 
    v-model="val" 
    type='checkbox' 
    :true-value="trueValue" 
    :false-value="falseValue"
    :id="id"
>

如果你使用它，我会建议将 id 设置为 mandatory。