How to trigger a method at page load in vuejs?

Question

How can I trigger a method at page load like tab?
for example:

<div id='wraper'>
<!-- div id menu not load -->
<div id="menu">
  <a href='#'>test</a>
  <a href='#'>test</a>
  <a href='#'>test</a>
</div>

<!-- load this content  -->
<div id="content">
konten
</div>
  
</div>

Thanks

What exactly are you trying to do? What's the "method" you're trying to run? I don't know what vue.js is, but JavaScript has the built-in window.onload event to have code that executes when the page loads. (just google "window.onload" for info) — Hayden Schiff
– Hayden Schiff, Commented Jan 28, 2016 at 15:03
I'm trying to make it so when I click on a link in a HTML page, it dynamically loads the requested page into a div with jQuery. How can I do that? — b4dQuetions
– b4dQuetions, Commented Jan 28, 2016 at 15:11
Ah, okay! If you're trying to load an entire web page inside another page, that sounds like you'll want to use something called iframes (google them). Basically, you'll have an iframe, and it'll have a name (let's suppose you name it "my_iframe"). Then, in your a tags, you'll add target="my_iframe", and they will automatically open in the iframe. — Hayden Schiff
– Hayden Schiff, Commented Jan 28, 2016 at 15:12

JJJ · Accepted Answer · 2016-11-29 13:58:34Z

69

For vue >= 2.0 use mounted and for previous version use ready.

vm=new Vue({
  el:"#app",
  mounted:function(){
        this.method1() //method1 will execute at pageload
  },
  methods:{
        method1:function(){
              /* your logic */
        }
     },
})

edited Nov 29, 2016 at 13:58

JJJ

33.2k20 gold badges95 silver badges103 bronze badges

answered Nov 29, 2016 at 13:37

Ashutosh Raj

1,0551 gold badge11 silver badges21 bronze badges

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

2 Comments

Ferrybig Over a year ago

Its better to use created() if you are not going use DOM access, as its run earlier in the process, and if you do remote api calls, they are executed earlier

CreationTribe Over a year ago

@Ferrybig true, however - in this instance, it looks like the OP is working with the DOM.

DevonDahon · Accepted Answer · 2022-11-30 11:49:18Z

23

This syntax is working fine:

export default {
    mounted() {
      this.myMethod();
    },
    methods: {
      myMethod() {
        return 'hello world!';
      }
    },
}

edited Nov 30, 2022 at 11:49

answered Feb 16, 2018 at 18:31

DevonDahon

8,5209 gold badges92 silver badges148 bronze badges

Collectives™ on Stack Overflow

How to trigger a method at page load in vuejs?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related