Vue.js中实现同ID el-switch组件的状态同步问题

问题根源 #

你当前的同步逻辑存在关键缺陷：syncDuplicateValues函数固定取第一个同ID项的Value作为同步基准值。当修改非首个开关时，触发change事件后，函数会把所有同ID项的Value重置为第一个项的旧值，导致非首个开关的新状态被覆盖，最终只有第一个开关显示变化。

修复步骤 #

1. 修改模板，传递最新开关值

更新el-switch的@change事件，把当前开关的最新状态值传入处理函数：

<el-switch v-else-if="item.Type == 'bool'"
class="float-left margin-top-8"
v-model="item.Value[UserSelected.Instance]"
:id="item.Id"
:ref="item.Id"
:disabled="item.disabled"
:active-value="1"
:inactive-value="0"
@change="ModifiedSet(index, UserSelected.Instance, item.Id, item.Value[UserSelected.Instance])"
/>

2. 更新事件处理函数，接收最新值

修改ModifiedSet函数，新增参数接收最新开关值，并传递给同步函数：

ModifiedSet: function(indexOnPage, inst, id, newValue) {
    this.PageDisplay[indexOnPage].Modified.splice(inst, 1, true);
    this.UserSelected.Uid = id;
            
    const duplicateIds = this.findDuplicateIds(Object.values(this.UidItemList));

    if (duplicateIds.includes(id)) {
        this.syncDuplicateValues(id, inst, newValue);
    }

    this.CountModified();
},

3. 重构同步函数，使用最新值同步

修改syncDuplicateValues函数，直接用传入的最新值更新所有同ID项，同时用$set确保响应式更新：

syncDuplicateValues: function(duplicateId, inst, newValue) {
    const items = Object.values(this.UidItemList);
    const duplicateItems = items.filter(item => item.Id === duplicateId);

    duplicateItems.forEach(item => {
        // 使用$set确保嵌套对象的响应式更新
        this.$set(item.Value, inst, newValue);
    });
},

关键说明 #

• 使用this.$set是因为item.Value属于嵌套对象，Vue默认无法直接检测到item.Value[inst]的赋值变化，$set能强制触发响应式更新，确保所有开关视图同步刷新。
• 现在无论修改哪个同ID开关，都会用它的最新状态作为基准同步所有同ID项，彻底解决单向同步的问题。

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