Vue.js动态添加表单字段时v-select2-component组件不生效问题求助

问题根因 #

• 未给动态生成的Select2组件绑定v-model，使用原生selected属性控制选中值的方式不符合v-select2-component的使用规范
• 所有动态生成的Select2共用全局的categoryarr_selected变量，没有为每个实例单独维护选中状态
• Select2组件的value属性配置错误，且没有配置唯一标识导致组件无法正确更新
• 移除事件的传参逻辑错误，splice方法需要数组索引而不是自定义的id值

修复步骤 #

1. 调整data与addEvent逻辑，为每个新增项单独维护选中状态 #

修改JS代码如下：

<script>
import Select2 from 'v-select2-component';
// 注意引入Select2样式，缺失会导致组件显示异常
import 'v-select2-component/dist/Select2.css'

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,
        // 每个新增项单独维护分类选中值
        selectedCategories: []
      });
      this.index++;
    },

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

2. 调整模板配置 #

修改模板中Select2部分代码：

<Select2
  :name="'category[]_' + index"
  :key="'select2_' + ecr.id"
  class="form-control multiselect"
  multiple="multiple"
  tabindex="-1"
  v-model="ecr.selectedCategories"
>
  <option
    v-for="cate in categoryarr"
    :key="cate.id"
    :value="cate.id"
  >
    {{ cate.title }}
  </option>
</Select2>

同时修改移除按钮的点击事件传参：

<button
  class="btn btn-danger text-white"
  @click="removeEvent(index)"
>
  移除
</button>

额外检查项 #

• 如果categoryarr是异步加载的，建议加v-if="categoryarr.length"控制Select2渲染时机，避免数据未加载完成导致组件初始化失败

内容的提问来源于stack exchange，提问作者Ashraful Alam Shihab