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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.