循环内输入元素的 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>

我希望能够点击标签元素并让它选择输入字段。

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'