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

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

组件

我在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框架前端框架

我来解答赞 13 收藏

反馈

2 条解答

艺涵 Lv1

UIkit这种老古董在Vue里直接用确实容易翻车。最简单的办法是用v-if或者v-show替代UIkit的toggle，或者手动初始化：

mounted() {

  UIkit.util.on(this.$el, 'click', '[uk-toggle]', UIkit.toggle)

}

要么干脆别用UIkit的toggle，Vue自己就能搞定：

<button @click="show = !show">切换</button>

<div v-show="show">这里是内容</div>

data里加个show变量完事，何必折腾UIkit。

2026-03-10 02:01

书生シ梓轩 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