Question

就我而言，我在另一个组件中创建了动态表单（例如todo应用）。我想要其他行动。因此，我必须为每个创建的element（div）设置id或编号。当我添加增量方法时，控制台显示重复的键错误。

如何为每个元素添加数字或ID？

例如：这是1.创建的元素，这是2.创建的元素，这是3.创建的元素，

一些代码：

 methods: {
        ...mapActions(["setAdList"]),
        ilanVer() {
            this.alert = true;
            let adListObj = {
                adName: this.adName,
                text: this.text,
                province: this.province,
                education: this.education,
                solder: this.solder,
                id: this.id
            }
            this.setAdList(adListObj);

            this.id += 1;
            console.log(this.id)
        },
    }

<template>
<!-- eslint-disable max-len -->
<div class="ad-box">
    <h1 class="d-flex justify-content-center align-items-center mt-2">İlanlarım</h1>
    <hr />
    <div class="ilan-list">
        <b-card :title=item.adName v-for="(item) in adList" :key="item.id" class="border border-info rounded w-50">
            <b-badge class="ml-3">{{item.id}}</b-badge>
            <p class="card-text">Aday Özellikleri: <span class="text-center">{{item.text}}</span> </p>
            <p class="card-text">Şehir: {{item.province}}</p>
            <p class="card-text">Eğitim: {{item.education}}</p>
            <p class="card-text">Askerlik: {{item.solder}}</p>
            <router-link to="/ilandetayi/:id">
                <b-button class="btn-outline-success mr-2">İlanlarıma Git</b-button>
            </router-link>
        </b-card>
        <hr />
    </div>
</div>
</template>

Answer 1

使用v-for指令时可以使用 index

在您的情况下 v-for="(item, index) in adList"，然后在块index中将具有值0, 1, 2, ....

Answer 2

您可以使用Index的{{1}}项来定义唯一ID v-for

v-for="(item, index) in adList" :key="index"

如何在Vue JS中为每个元素添加数字或ID？

2 个答案: