vue和bootstrapVue使用table和modal时，有多少条数据就会弹出多少个弹出框

Question

`

  <b-table striped hover small :fields="fields" :items="lessons" responsive="sm">
    <template v-slot:cell(Id)="data">
      {{ data.item.Id}}
    </template>

    <template v-slot:cell(LessonName)="data">
      <router-link :to="{path:'/knowledgeManagement',query:{'Id':data.item.Id,'Lesson': data.item.LessonName }}">
        <b style="width: 50%;">{{ data.item.LessonName }}</b></router-link>
    </template>

    <template v-slot:cell(Operation)="data">
      <b-button size="sm" class="mr-2" @click='changeUpdateTarget(data.item.Id,data.item.LessonName)'
        v-b-modal.updateLesson>
        update
      </b-button>
      <b-modal id='updateLesson' title="请输入修改后课程名称" @ok="updateOk">
        <div>
          <form ref="form" @submit.stop.prevent="updateSubmit">
            <b-form-group :state="lessonState" label="Lesson" label-for="Lesson-input" invalid-feedback="请输入课程名称">
              <b-form-input id="Lesson-input" v-model="updateLessonName" :state="lessonState" required></b-form-input>
            </b-form-group>
          </form>
        </div>
      </b-modal>
      <b-button size="sm" class="mr-2" @click='changeDeleteTarget(data.item.Id)'  v-b-modal.deleteLesson>
        delete
      </b-button>
      <b-modal id="deleteLesson" title="确定要删除该课程吗" @ok="deleteOk">
      </b-modal>
    </template>
  </b-table>

`

我在一个表格里最后添加了修改和删除按钮弹出modal进行确认，但我这样写的话，表格中有多少条数据，就会弹出多少个modal，请问问题出在哪里？

Answer 1

<b-modal id='updateLesson' title="请输入修改后课程名称" @ok="updateOk">

从这里看，你没有为没条记录定义独特的id。那么你使用的时候又是如何区分的呢？