vue.js - Select2 不适用于 Vue.js 中动态添加的字段

Question

在我的 vue laravel 应用程序中......我通过 onclick 函数动态添加了一些选择选项。对于初始选择选项，select2 工作正常，但是当我尝试动态添加更多字段时，select 2 不起作用。我用过（npm install v-select2-component --save）但不幸的是不起作用

<script>
import Select2 from 'v-select2-component';
export default {
  components: {Select2},
  data(){
  return{
   event_Category_Remove: [],
      index: 0,
      eventsElement_id: [],
  }
  },
      
     methods:{
     addEvent() {
      this.eventsElement_id = [];
      this.event_Category_Remove.push({
        id: this.index,
        name: "ecr" + this.index,
      });
      this.index++;
    },

    /** ========= Remove Event  ========= */
    removeEvent(index) {
      this.event_Category_Remove.splice(index, 1);
    },
  }
</script>

<template>
                              <div
                              class="
                                form-group
                                row
                                without-form-background
                                mb-2
                              "
                            >
                              <label class="col-md-2 label-control" for="weight"
                                >Event (can be multiple)</label
                              >
                              <a class="text-primary" @click="addEvent">
                                <i>Add</i> <i class="fa fa-plus"></i>
                              </a>
                            </div>
                            <!-- ======== Adding Multiple Event Button  End  ======== -->

                            <!-- ///////////////////// -->

                            <!-- ======== Event Start  ======== -->
                            <div
                              class="event_Category_Remove"
                              v-for="(ecr, index) in event_Category_Remove"
                              :key="ecr.id"
                              :id="'eventChild_' + index"
                            >
                              <div
                                class="
                                  form-group
                                  row
                                  without-form-background
                                  mb2
                                "
                              >
                                <label class="col-md-2 label-control" for="name"
                                  >Event</label
                                >
                                <div class="col-md-10">
                                  <select
                                    :name="'event_' + index"
                                    id=""
                                    class="form-control"
                                  >
                                    <option
                                      name="event"
                                      v-for="event in event"
                                      :key="event.id"
                                      :value="event.id"
                                      :selected="event.id == event_selected"
                                    >
                                      {{ event.name }}
                                    </option>
                                  </select>
                                </div>
                              </div>

                              <!-- ======== Event Ends  ======== -->

                              <!-- ////////////////////// -->

                              <!-- ======== Category Start  ======== -->

                              <div
                                class="
                                  form-group
                                  row
                                  without-form-background
                                  mb2
                                "
                              >
                                <label class="col-md-2 label-control" for="name"
                                  >Category</label
                                >
                                <div class="col-md-10">
                                  <Select2
                                    :name="'category[]_' + index"
                                    id=""
                                    class="form-control multiselect"
                                    multiple="multiple"
                                    tabindex="-1"
                                    selected
                                    value="cate.id"
                                  >
                                    <option
                                      v-for="cate in categoryarr"
                                      :key="cate.id"
                                      :value="cate.id"
                                      :selected="
                                        categoryarr_selected.includes(
                                          String(cate.id)
                                        )
                                      "
                                    >
                                      {{ cate.title }}
                                    </option>
                                  </Select2>
                                </div>
                              </div>

                              <!-- ======== Category End  ======== -->

                              <!-- /////////////// -->

                              <!-- ======== Remove Button1  Start  ======== -->

                              <div
                                class="form-group without-form-background mb2"
                              >
                                <button
                                  class="btn btn-danger text-white"
                                  @click="removeEvent(ecr.id)"
                                >
                                  Remove
                                </button>
                                <hr class="bg-danger" />
                              </div>
                            </div>
                </template>