Vue.js标记循环内的输入元素

Question

您将如何使用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>

我希望能够单击label元素并让它选择输入字段.

Answer 1

你可以使用:id=""和:for="".您需要添加js字符串插值以从节和索引信息创建唯一ID.例如:

<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'