通过vueJS2使用多个Select2

data() {
  return {
    selectOptions: [
      { id: 1, text: 'Option 1' },
      { id: 2, text: 'Option 2' },
      { id: 3, text: 'Option 3' }
    ],
    selectedOptions: []
  }
}

<template>
  <div>
    <div v-for="index in 3" :key="index">
      <select class="select2" v-model="selectedOptions[index]" multiple>
        <option v-for="option in selectOptions" :key="option.id" :value="option.id">{{ option.text }}</option>
      </select>
    </div>
  </div>
</template>

mounted() {
  for (let index = 1; index <= 3; index++) {
    $(this.$el)
      .find('.select2')
      .eq(index - 1)
      .select2({
        placeholder: 'Select options',
        data: this.selectOptions
      })
      .on('change', (event) => {
        this.selectedOptions[index] = $(event.target).val()
      })
  }
}

beforeDestroy() {
  $(this.$el)
    .find('.select2')
    .select2('destroy')
}