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

【问题标题】：Trigger button click event of a Vue.js application programmatically in a Chrome extension在 Chrome 扩展中以编程方式触发 Vue Js 应用程序的按钮单击事件
【发布时间】：2021-07-05 05:14:02
【问题描述】：

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

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

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

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

谢谢

【问题讨论】：

标签： javascript jquery vue.js

【解决方案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>

【讨论】：