javascript - How to trigger a click event once a page or view is loaded in vue.js? - Stack Overflow

admin管理员组

文章数量:1310906

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:

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=".5.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg/bootstrap/dist/css/bootstrap.min.css" />
<script src=".5.16/vue.js"></script>
<link rel="stylesheet" href=".27.5/css/uikit.min.css" />
<script src=".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>

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/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./ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg./bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.16/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/uikit/2.27.5/css/uikit.min.css" />
<script src="https://cdnjs.cloudflare./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>

• javascript
• vue.js
• vuejs2

Share Improve this question Follow edited Aug 30, 2021 at 12:25 caot asked Dec 24, 2020 at 15:54 caotcaot 3,32811 gold badge3636 silver badges4343 bronze badges 7

• 3 Why not call the click handler method directly instead? – Dan 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. – caot Commented Dec 24, 2020 at 16:17
• Is the popup part of your app? If so, you should show the ponent so it's easier to explain – Dan 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. – caot Commented Dec 24, 2020 at 16:29
• You would need to show all of the relevant ponent template + code in your question, not describe it – Dan Commented Dec 24, 2020 at 16:38

 |  Show 2 more ments

3 Answers 3

Sorted by: 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./bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.16/vue.js"></script>


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

  <button ref="okBtn" @click="logOk"> OK</button>
</div>

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.

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./ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg./bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.16/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/uikit/2.27.5/css/uikit.min.css" />
<script src="https://cdnjs.cloudflare./ajax/libs/uikit/2.27.5/js/uikit.min.js"></script>

本文标签： javascriptHow to trigger a click event once a page or view is loaded in vuejsStack Overflow