通过单击 vuetify 项目中的另一个按钮触发按钮单击？答案

【问题标题】：Trigger a button click from clicking another button in vuetify project?通过单击 vuetify 项目中的另一个按钮触发按钮单击？
【发布时间】：2019-12-07 07:06:02
【问题描述】：

我需要单击一个按钮来激活另一个按钮上的单击功能。我希望能够在按钮上使用 ref 道具来实现这一点，但我得到一个“无法读取属性 '$refs' of null”控制台错误。

<v-btn ref="modalButton" @click="modal">Open Modal</v-btn>
<v-btn @click="this.$refs.modalButton.click()">Click other button</v-btn>

显然这是因为组件 isn't created yet 但我真的很困惑这意味着什么以及如何解决问题。

【问题讨论】：

这让我觉得是一个 XY 问题。虽然你可能可以达到你描述的效果像这样@click="() => { this.$refs.modalButton.$emit('click') }"

标签： vue.js button click vuetify.js ref

【解决方案1】：

将 "this.$refs.modalButton.click()" 放入函数中 - 您不能在 HTML 中以这种方式引用 modalButton。

虽然，如果您的 modal 的可见性与数据属性相关联，我不知道您为什么不能直接使用两个按钮更改数据属性。

【讨论】：

其实可以，只要去掉this关键字，确保组件已经挂载。

【解决方案2】：

如果您想在另一件事发生时做某事，请尝试使用称为事件总线的东西。我解决了很多实现它的问题。

这是一个例子： https://alligator.io/vuejs/global-event-bus/

顺便说一句：如果你的问题是在渲染时刻还没有创建其他组件，你可以在 @click 事件上调用一个函数来解决它，然后当你点击它时，你就是将调用将在 DOM 中的所有内容都已呈现时调用的函数。至少我是这样解决这类问题的。

【讨论】：

【解决方案3】：

请注意点击没有'()'

<v-btn ref="modalButton" @click="modal">Open Modal</v-btn>
<v-btn @click="$refs.modalButton.$el.click">Click other button</v-btn>

【讨论】：

谢谢，伙计！这让我发疯了，出于某种原因，vuetify 违反了约定，并没有使其成为函数调用......