Vue.jsコンポーネントは、私はラベルの付いたチェックボックスを持つカスタムVueのコンポーネント（vcheck）を持っている

Question

を競合します、チェックボックスのIDが衝突：

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

だから私は、第二のチェックボックスのラベルをクリックすると、第一1つの変化（どちらも同じIDを持っているので）。現時点では、私はIDを削除し、ラベルに@clickというイベントだけを使用しました。しかし、コンポーネントのすべてのインスタンスに固有のIDを生成する方法はありますか？

<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を支える作ることをお勧めします

Answer 1

1つのオプションはvcheckに小道具としてもIDを渡すことができますこの。