UIkit的Toggle切换器在Vue里为啥不生效？

书生シ含含提问于 2026-03-02 17:36:20 阅读 4

组件

我在Vue项目里引入了UIkit，想用它的Toggle组件做展开收起，但点击按钮没反应，控制台也没报错。

我按照文档加了uk-toggle和对应的target，也确认UIkit JS加载了，是不是Vue的响应式机制和UIkit冲突了？

<template>
  <div>
    <button uk-toggle="target: #my-content">切换</button>
    <div id="my-content" class="uk-hidden">这里是内容</div>
  </div>
</template>

UIkit UI框架前端框架

我来解答赞 4 收藏

反馈

1 条解答

书生シ梓轩 Lv1

这个问题我之前也踩过坑，问题应该出在UIkit初始化时机上。

UIkit在页面加载时会自动扫描DOM，给带有uk-toggle属性的元素绑定事件。但Vue组件挂载的时候，UIkit的自动初始化早就跑完了，根本不知道后来渲染出来的这些DOM元素存在，所以点击没反应，控制台也不报错——因为压根就没绑定上事件。

解决办法有两个思路。

第一种，在mounted里手动调用UIkit的初始化方法：

mounted() {

  this.$nextTick(() => {

    UIkit.toggle(this.$el.querySelector('[uk-toggle]'));

  });

}

第二种更简单粗暴，直接用UIkit的编程式API，不依赖属性初始化：

第二种方式更可控，也符合Vue的编程习惯。如果项目里大量用UIkit组件，建议封装成Vue组件统一管理，不然到处写mounted初始化会很烦。

2026-03-02 18:16