Trigger button click event of a Vue.js application programmatically in a Chrome extension

Question

I am developing a Google Chrome extension. There's a third party website that is developed in Vue.js.

I need to trigger a click event of a button on a page. But when I do this using JavaScript, the page reloads, but when the user manually clicks the button then it processes the validations and does not reload if any validation fails.

I am using the following code to click the button (jQuery code):

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

Note: the above code correctly initiates the click event of the related control, but the page reloads instead of waiting for the validation result. Also if I update the control's value using JavaScript then that does not get reflected on post-back.

Answer 1

Add a reference to your button, and then use that reference to trigger the button event click. Look at the following example:

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>