Vue.js v2 を使用して、繰り返し入力要素の入力idとラベルをfor一意になるように設定するにはどうすればよいでしょうか。
<section class="section" v-for="(section, i) in sections">
<div class="fields">
<fieldset>
<input type="checkbox" id="" name="example-a" v-model="section.ex-a">
<label for="">Example A</label>
</fieldset>
<fieldset>
<label for="">Example B</label>
<input type="text" id="" name="example-b" v-model="section.ex-b">
</fieldset>
<fieldset>
<label for="">Example C</label>
<input type="text" id="" name="example-c" v-model="section.ex-c">
</fieldset>
</div>
</section>
ラベル要素をクリックして入力フィールドを選択できるようにしたいと思います。
ベストアンサー1
:id=""および を使用できます:for=""。セクションとインデックス情報から一意の ID を作成するには、文字列補間を追加する必要がありますjs。例:
<div class="fields">
<fieldset>
<input type="checkbox" :id="'section'+i+'example-a'" name="example-a" v-model="section.ex-a">
<label :for="'section'+i+'example-a'">Example A</label>
</fieldset>
<fieldset>
<label for="'section'+i+'example-b'">Example B</label>
<input type="text" :id="'section'+i+'example-b'" name="example-b" v-model="section.ex-b">
</fieldset>
<fieldset>
<label :for="'section'+i+'example-c'">Example C</label>
<input type="text" :id="'section'+i+'example-c'" name="example-c" v-model="section.ex-c">
</fieldset>
</div>
例えば、最初のfieldsetバインディングは補間として:id="'section'+i+'example-a'"レンダリングされますid="section-0-example-a"'section' + the index of the array + 'example-a'