Vue+Bulma开发中DOM更新后按钮焦点状态保留如何解决？

算力阿峰

2026-10-5

解决方案

核心原因

该现象是因为按钮被点击后会默认保持焦点状态，Vue更新按钮文本时仅复用原有DOM节点，焦点状态不会自动清除，而Bulma默认给按钮设置了焦点样式，所以会持续显示选中效果。

最优方案（符合Vue惯用规范）

通过点击事件传递原生事件对象，结合Vue提供的$nextTick异步API，在DOM更新完成后主动移除按钮焦点，无副作用也不影响无障碍体验：

修改后的代码

JS部分

var app = new Vue({
  el: '#app',
  data: {
    options: [{
      text: "This is the first text"
    }, {
      text: "This is the second text"
    }, {
      text: "This is the third text"
    }],
    index: 0,
  },
  methods: {
    nextText: function(e) {
      if (this.index < this.options.length - 1) {
        this.index++;
      } else {
        this.index = 0;
      }
      // 等待DOM更新完成后移除按钮焦点
      this.$nextTick(() => {
        e.target.blur()
      })
    }
  }
})

HTML部分（仅需要修改点击事件传参）

<link href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="app">
  <button v-on:click="nextText($event)" class="button is-primary is-outlined">{{ options[index].text }}</button>
</div>

其他可选方案

ref方案：如果事件不是直接绑定在按钮上，可以给按钮添加ref属性来获取DOM实例：
模板中给按钮加ref="toggleBtn"，然后在$nextTick回调中执行this.$refs.toggleBtn.blur()即可。
CSS方案：如果该按钮不需要支持键盘焦点操作，可以直接覆盖样式清除焦点效果，不需要修改JS：
```
.button.is-outlined:focus {
  box-shadow: none;
  outline: none;
}
```
注意：该方案会影响无障碍体验，不推荐用于需要支持键盘导航的场景。