在 Chrome 扩展中以编程方式触发 Vue Js 应用程序的按钮单击事件

Question

我正在开发一个 chrome 扩展。 有一个用 VueJs 开发的第三方网站。 我需要触发页面上按钮的点击事件。 但是，当我使用 JavaScript 执行此操作时，页面会重新加载，但是当用户手动单击按钮时，它会处理验证，如果任何验证失败，则不会重新加载。

我正在使用以下代码单击按钮（jQuery 代码）：

$('[type="submit"]').eq(1).trigger('click');

注意：以上代码正确发起了相关控件的点击事件，但是页面重新加载而不是等待验证结果。 此外，如果我使用 JavaScript 更新控件的值，那么这不会反映在回发中。

谢谢

Answer 1

为您的按钮添加一个引用，然后使用该引用触发按钮事件单击，请看以下示例：

 Vue.config.devtools = false; Vue.config.productionTip = false; new Vue({ el: '#app', methods: { logTest() { console.log("test test") } }, mounted() { this.$refs.test.click(); } })

 <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script> <div id="app" class="container"> <button ref="test" @click="logTest">test</button> </div>