Vue.js组件与复选框ID冲突

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。