Vue中能否修改元素父节点？实现选中call-item迁移至showOperation

<div id="panels-window" class="block-window" v-if="showPanelsWindow">
    <div v-if="showPanels" id="panels">
        <div id="panel-sorted" class="block-window panel">
            <call-item
                v-for="(call, index) in callsSorted"
                v-bind:key="call.id"
                v-bind:call="call"
                v-bind:sorted=true
                v-bind:order="{order: index}"
                v-on:update-calls="updateCalls"
            ></call-item>
        </div>
    </div>
</div>
<div id="showOperation"></div>

可以实现，但绝对不建议直接操作DOM移动元素——Vue是数据驱动框架，核心逻辑是用数据状态控制视图变化，这样才能保证数据与视图的一致性，避免后续出现不可预料的bug。

具体实现思路 #

1. 拆分数据集合：把原有的callsSorted拆分为两个数组，比如normalCalls（用于panel-sorted列表展示）和activeCall（用于showOperation区域，通常这类场景一次只需要展示一个选中项）。
2. 添加交互逻辑：在call-item组件内添加选中事件，当用户选中某一项时，将该项从normalCalls中移除，同时赋值给activeCall。
3. 绑定视图更新：
   • panel-sorted区域用v-for遍历normalCalls渲染列表
   • showOperation区域根据activeCall是否存在，渲染对应的call-item

修改后的示例代码 #

<div id="panels-window" class="block-window" v-if="showPanelsWindow">
    <div v-if="showPanels" id="panels">
        <div id="panel-sorted" class="block-window panel">
            <call-item
                v-for="(call, index) in normalCalls"
                :key="call.id"
                :call="call"
                :sorted=true
                :order="{order: index}"
                @update-calls="updateCalls"
                @select-call="selectCall"
            ></call-item>
        </div>
    </div>
</div>
<div id="showOperation">
    <call-item
        v-if="activeCall"
        :key="activeCall.id"
        :call="activeCall"
        :sorted=false
        @back-to-list="backToList"
    ></call-item>
</div>

对应脚本逻辑 #

export default {
    data() {
        return {
            normalCalls: [],
            activeCall: null
        }
    },
    methods: {
        selectCall(call) {
            // 从列表中移除选中项
            this.normalCalls = this.normalCalls.filter(item => item.id !== call.id)
            // 设置为激活项
            this.activeCall = call
        },
        backToList(call) {
            // 将激活项放回列表
            this.normalCalls.push(call)
            // 清空激活项
            this.activeCall = null
            // 若需要保持列表排序，可在此重新排序normalCalls
        },
        updateCalls() {
            // 保留原有业务逻辑
        }
    },
    created() {
        // 初始化列表数据
        this.normalCalls = [...this.callsSorted]
    }
}

为什么不直接操作DOM？ #

直接用原生DOM API（如appendChild、removeChild）移动元素会绕过Vue的响应式系统，导致数据与视图脱节，后续的状态更新可能出现各种异常，完全违背了Vue数据驱动的设计初衷。

内容的提问来源于stack exchange，提问作者Вячеслав Предеин