Vue中使用setAttribute无法为元素成功添加属性如何解决

安全阿岳

2026-9-1

问题根源

函数放置位置错误：computed计算属性的作用是基于响应式依赖返回计算结果，具备缓存特性，不会主动执行你定义在内部的DOM操作逻辑。你将changetab定义在computed中后，若没有主动调用该函数，内部选择DOM、添加属性的代码完全不会运行。
原生DOM操作不符合Vue运行逻辑：Vue基于虚拟DOM驱动视图更新，你手动获取真实DOM修改属性的操作，会在组件下一次重渲染时被虚拟DOM生成的新DOM结构覆盖，修改不会持久生效。
模板本身存在问题：你贴出的模板存在标签闭合错误（开标签为<el-container>，闭标签错误写为</el-download>），且模板内没有任何携带delCon__select类名的元素，document.querySelectorAll(".delCon__select")会返回空节点列表，遍历不会执行任何有效操作。

正确实现方案

放弃原生手动操作DOM的思路，用Vue的响应式绑定方式实现属性添加，从根源避免DOM操作和虚拟DOM更新的冲突：

修正模板的标签错误，直接在目标元素上通过Vue的属性绑定语法动态绑定tabindex，不需要手动查询DOM：

<template>
  <el-container class="orders">
    <!-- 你的目标元素示例 -->
    <div
      v-for="(item, idx) in selectOptions"
      :key="idx"
      class="delCon__select"
      :tabindex="focusable ? 0 : -1"
    >
      {{ item.label }}
    </div>
  </el-container>
</template>

将控制逻辑放到methods中，用响应式变量控制属性值，需要触发修改时直接修改变量即可，Vue会自动完成DOM更新：

export default {
  data() {
    return {
      focusable: false, // 控制tabindex的响应式变量
      selectOptions: [] // 对应delCon__select元素的业务数据
    }
  },
  methods: {
    changetab() {
      this.focusable = true
      return true
    }
  },
  // 如果需要组件挂载后就执行设置，放到mounted生命周期钩子中调用即可
  mounted() {
    this.changetab()
  }
}

如果delCon__select是第三方组件（比如Element Plus的组件），直接在组件标签上绑定:tabindex即可，属性会自动透传到组件的根DOM节点上，无需手动操作。

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