javascript - 从 vue 指令操作目标的 dom
问题描述
我想定义一个 vue 指令,在点击时切换弹出窗口的显示,我现在拥有的是:
切换.js
export default {
bind(el, binding) {
console.log(binding.value); // this is undefined
el.onclick = function() {
console.log(binding.value); // this is undefined as well
// toggle menu element display
};
}
};
组件.vue
<template>
<button v-toggle="$refs.menu">
...
</button>
<div ref="menu">
...
</div>
</template>
<script>
import Toggle from 'path/to/toggle.js';
export default {
name: "Component",
directives: {
Toggle
}
</script>
内部绑定函数 binding.value 始终未定义,可能是因为菜单引用尚未准备好。这样做的正确方法是什么?
解决方案
$refs
在设置指令时不会填充。您可以使其表达式成为一个函数,该函数将$refs.menu
在单击发生时进行评估,而不是在指令设置时进行评估。
new Vue({
el: '#app',
directives: {
toggle: {
bind(el, binding) {
el.onclick = function() {
const target = binding.value();
target.classList.toggle('closed');
};
}
}
}
});
.closed {
display: none;
}
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
<button v-toggle="() => $refs.menu">
Button
</button>
<div ref="menu">
Some junk in the menu
</div>
</div>
推荐阅读
- c - 如何释放链表的元素和内容?
- batch-file - 使用 vbscript 杀死指定的可执行路径
- sql-server - 超过特定字符长度的 SQL Server 查询超时
- jms - 如何使用 jboss-cli 在 WildFly 17 中创建 JMS 队列
- ansible - Ansible lineinfile - 追加到行尾而不覆盖
- python - spotipy 的 current_user_top_artists 仅适用于高级用户吗?
- python - 如何抓取网站 Python 中的所有页面
- android - 如何在我的视图模型中重试请求
- r - 跨多个列的迭代 if_else 语句?
- airflow - 避免气流中的过期日期