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'

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

1 个答案: