提问者:小点点

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


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

我使用以下代码来单击按钮(jQuery代码):

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

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

谢谢


共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();
  }
})
<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>