我正在使用 VueJs 2 + vuetify 构建一个应用程序。 我有一个带有按钮的弹出菜单,我希望每次出现弹出菜单时只能单击一次...
我尝试在按钮上使用 @click.once
,第一次点击效果很好,但我找不到重置按钮的方法,所以第二次显示菜单时可以再次点击。
<v-dialog
v-model="dialogDeploy"
width="500"
persistent
lazy
>
...
<v-btn
color="success"
flat
:loading="loading"
@click.once="deploySnapshot"
>
Deploy
</v-btn>
dialogDeploy 等于 false
,切换到 true
显示菜单,按下按钮时返回 false。
这样做的正确方法是什么?
有没有办法重置 once
属性?
我知道另一种解决方案是使用 true/false 数据变量来设置按钮是否处于事件状态...但我认为使用 once
属性会是也不错……
谢谢
最佳答案
我不知道是否有更好的解决方案,但是当您需要再次启用click.once
时,您可以强制重新安装按钮。
要实现它,只需给按钮组件一个 key
并增加它以重新安装。
这是一个简单的例子:
new Vue({
el: "#app",
data: {
buttonKey: 1
},
methods: {
clickOnceEvent() {
alert('click.once!')
},
enableClickOnce() {
this.buttonKey++
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button @click.once="clickOnceEvent" :key="buttonKey">
Click Once Button
</button>
<button @click="enableClickOnce">
Re-enable Click Once
</button>
</div>
关于javascript - 单击后重新启用按钮@click.once,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56041297/