3

Ran into a case to trigger a click once a page or view is loaded, and a popup is triggered in vue.js to edit data table row. There is no such a good VUE way that I can find, although the following link mentioned a way as the follows:

https://forum.vuejs.org/t/how-to-trigger-a-click-event-through-code-in-vuejs-on-page-load/92582

mounted: function () {
    setTimeout(function(){ 
        const elem = document.getElementById('myBtn');
            elem.click(); 
    }, 100);
},

I did in a similar way as the follows. The try catch to contain error although it's ugly, since at some point the data doesn't exist.

edit: function (idx, row) {
    ... nore code here ...
    try {
        document.getElementById(row.id).click();  // row.id is dynamic or variable
    } catch (error) {
        // pass
    }
},

However my team mate, a vue.js lover, said it's not a damn VUE way. Now what it the right way to do such a thing?

The following Demo is possible for the expected work:

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

new Vue({
el: '#app',

data: {
  li_address: [{name: 'CA'}, {name: 'NY'}, {name: 'AL'}],
  name: 'NY'
},

methods: {
},
mounted() {
  console.log(['this.name', this.name]);

  // this.$refs[this.name].click(); // failed
  document.getElementById(this.name).click();  // worked. the click is triggered upon this.name
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/css/uikit.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/js/uikit.min.js"></script>

<div id="app" class="container">

<div class="uk-grid" uk-grid>
<div v-for="r in li_address">
    <label>{{r.name}}
    <input :id="r.name" :ref="r.name" type="radio" class="uk-radio" :value="r"
     name="address_group">
    </label>
</div>

  </div>

</div>

Improve this question
7
  • 3
    Why not call the click handler method directly instead? Commented Dec 24, 2020 at 16:05
  • @Dan It's a pop up window, and the click has to be after the popup is loaded. I am not sure I understood the way you mentioned. Commented Dec 24, 2020 at 16:17
  • Is the popup part of your app? If so, you should show the component so it's easier to explain Commented Dec 24, 2020 at 16:23
  • Actually, it's a data table, the popup is to edit a row. Once a click on Edit button, the popup is populated with the row of data. After the popup is loaded, a click is needed. Commented Dec 24, 2020 at 16:29
  • You would need to show all of the relevant component template + code in your question, not describe it Commented Dec 24, 2020 at 16:38

3 Answers 3

Reset to default
3

Add a ref to your element called myBtn like :

  <div ref="myBtn" >some content</div>

then run the click :

 this.$refs.myBtn.click()

example :

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

new Vue({
  el: '#app',


  methods: {
    logOk() {
      console.log("OK OK")
    }

  },
  mounted() {
    this.$refs.okBtn.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="okBtn" @click="logOk"> OK</button>
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

12 Comments

this.$refs is kind of ugly IMHO. Thanks for sharing the solution.
not ugly, it's the Vue way to manipulate the DOM vuejs.org/v2/guide/…
If ref="data_row.id", and the data_row.id or okBtn is dynamical variable, is there a way through this.$refs to call click() ? Thanks
Yes you could ,using :ref="data_row.id" and this.$refs[data_row.id].click()
:ref="data_row.id" or ref="data_row.id" is gone if it's in tag <input
|
2

Just select your element and trigger Click Event on Mounted life cycle of Vue app

mounted() {
 this.$nextTick(() => {
   document.getElementById('myBtn').click()
 });      
}

$nextTick according to VueJs documentation :

Defer the callback to be executed after the next DOM update cycle. Use it immediately after you’ve changed some data to wait for the DOM update.

Improve this answer

1 Comment

document.getElementById('myBtn').click() is mentioned in the question. That looks not a vue way. The Vanilla JavaScript works perfectly well.
2

In your example code, there is no need for any DOM manipulation. The main strength of a declarative reactive framework like Vue is for changes to the model to be automatically propagated to the view. This will select the appropriate radio button just by setting v-model appropriately.

new Vue({
  el: '#app',
  data() {
    return {
      li_address: [{name: 'CA'}, {name: 'NY'}, {name: 'AL'}],
      name: 'NY'
    }
  }
})
<div id="app" class="container">
  <div class="uk-grid" uk-grid>
    <div v-for="r in li_address">
      <label :for="r.name">{{r.name}}
      <input type="radio" v-model="name" :id="r.name" :value="r.name">
      </label>
    </div>
    <h4>NAME: {{ name }}</h4> 
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/css/uikit.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/js/uikit.min.js"></script>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.