Vue.js循环渲染select组件选项同步变更问题及修复需求

问题根源 #

核心问题是所有下拉框共用了同一个数据源servicesOfThirdParty，每次点击任意一个select触发getThirdPartyServices时，都会覆盖这个全局数组，导致所有下拉选项同步更新；同时没有为每个下拉框单独维护选中状态，加上重复的id属性，进一步加剧了异常。

修复方案 #

需要为每个循环项单独维护服务列表和选中状态，具体步骤如下：

1. 调整数据结构
   在clinicThirdPartyServices的每个对象中，新增两个字段：

   • services：存储当前项对应的第三方服务列表
   • selectedServiceId：存储当前下拉框的选中值

   初始化示例：

   // 假设原clinicThirdPartyServices是接口返回的数组
   this.clinicThirdPartyServices = this.clinicThirdPartyServices.map(item => ({
     ...item,
     services: [],
     selectedServiceId: ''
   }))
   

2. 修改点击事件逻辑
   将getThirdPartyServices方法改为更新当前项的services数组，而非全局数据源：

   getThirdPartyServices(ownerId, serviceItem) {
     // 调用接口获取对应第三方的服务列表
     yourServiceApi(ownerId).then(res => {
       // 仅更新当前项的服务列表
       serviceItem.services = res.data
     })
   }
   

3. 更新模板代码
   调整循环内的数据源绑定、选中状态和id属性：

   <div class="form-group" v-for="(service , index) in clinicThirdPartyServices" :key="index">
     <div class="form-group row mb-6">
       <div class="col-md-3">
         <label class="form-label">[[service.category]]</label>
         <input  class="form-control form-control-solid"
                :placeholder="[[service.category]]"
         />
         <input hidden class="form-control form-control-solid"
                placeholder="{{ thirdparty.category }}" name="service_category"
                value="{{ thirdparty.category }}"
         />
       </div>
       <div class="col-md-3">
         <label class="form-label">{% translate 'Service' %} </label>
         <select
                 name="service_supplier" :id="`service-${index}`"
                 aria-label="{% translate 'Service' %}"
                 data-placeholder="{% translate 'Service' %}"
                 @click="getThirdPartyServices([[service.owner_id]], service)"
                 class="form-select form-select-solid fw-bolder"
                 v-model="service.selectedServiceId"
                 >
           <!-- 遍历当前项专属的services数组 -->
           <option v-for="(item,idx) in service.services" :key="item.slug" :value="[[item.id]]">[[item.title]]</option>
         </select>
       </div>
       <div class="col-md-5">
         <label class="form-label">{% translate 'Note' %}</label>
         <input  class="form-control form-control-solid"
                placeholder="{% translate 'Note' %}" name="service_note"
                value=""
         />
       </div>
     </div>
   </div>
   

关键改动说明 #

• 每个下拉框的选项数据源改为当前项的service.services，避免全局数据源被覆盖导致的同步变更
• 用v-model="service.selectedServiceId"为每个下拉框绑定独立的选中状态
• 将select的id改为:id="service-${index}"，保证DOM中id唯一，避免浏览器异常行为
• 点击事件传递当前项对象service，让接口返回的服务列表仅更新当前项的数据源

内容的提问来源于stack exchange，提问作者DigitHup