在Chrome扩展中编程触发Vue Js应用的按钮点击事件

Question

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

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

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

注意：上面的代码正确地启动了相关控件的click事件，但是页面重新加载而不是等待验证结果。另外，如果我使用JavaScript更新控件的值，那么这在回发时不会得到反映。

谢谢

Answer 1

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

null

Vue.config.devtools = false;
Vue.config.productionTip = false;

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

html prettyprint-override"><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>