首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Vue.JS:页面加载后如何调用函数?

Vue.JS:页面加载后如何调用函数?
EN

Stack Overflow用户
提问于 2016-05-08 17:19:54
回答 3查看 138.5K关注 0票数 42

我得到了next Vue组件。Login作为调用登录函数。checkAuth --正在调用在页面刷新之间检查授权状态。

但是我怎么才能在不按下按钮的情况下调用checkAuth呢?

代码语言:javascript
复制
var GuestMenu = Vue.extend({
    props: ['username', 'password'],
    template: `
        <div id="auth">
            <form class="form-inline pull-right">
                <div class="form-group">
                    <label class="sr-only" for="UserName">User name</label>
                  <input type="username" v-model="username" class="form-control" id="UserName" placeholder="username">
                </div>
                <div class="form-group">
                  <label class="sr-only" for="Password">Password</label>
                  <input type="password" v-model="password" class="form-control" id="Password" placeholder="Password">
                </div>
              <button type="submit" class="btn btn-default" v-on:click.prevent="sendLoginInfo()">LOGIN</button>
              <button type="submit" class="btn btn-default" v-on:click.prevent="checkAuth()">CheckAuth</button>
            </form>
        </div>`,

    methods: { 
        //hash key-value
        sendLoginInfo: sendLoginInfo, // key (anyname) | value -> calling function name (from separate file) 
        
        //calling without brackets because we do need return from function, we need just function
        checkAuth: checkAuth // restore authorization after refresh page if user already have session!
    }
});

我试着从App调用它:

代码语言:javascript
复制
App = new Vue({ // App -- is need for overwrite global var. Global var need declarated abobe all function, because some it's function is calling from outside
        el: '#app',
        data: {
            topMenuView: "guestmenu",
            contentView: "guestcontent",
            username: "",
            password: "",

        },
        ready: function() {
            checkAuth(); // Here

        }
    }
)

但它看起来像是在不加载所有组件时调用,

代码语言:javascript
复制
function checkAuth() {
    // we should NOT send any data like: loginData because after refreshing page
    // all filds are empty and we need to ask server if he have authorize session

    console.log("Checking if user already have active session");

    this.$http.post('http://127.0.0.1:8080/checkAuthorization').then(function(response) {
            console.log("server response: ", response.data)
        }
    }
    // ...
}

这里我得到了一个错误:

authorization.js:69 Uncaught TypeError: Cannot read property 'post' of undefined

我试着去做:

代码语言:javascript
复制
{
// ...
    methods: { //hash key-value
      sendLoginInfo : sendLoginInfo, // key (anyname) | value -> calling function name (from separate file) 
      //calling without brackets because we do need return from function, we need just function

    },
    ready()
    {
      checkAuth()
    }
// ...
}

但还是得到了错误:Uncaught TypeError: Cannot read property 'post' of undefined

我做错了什么?

EN

回答 3

Stack Overflow用户

发布于 2017-02-06 22:11:45

让我看看mounted(),我想是有帮助的

https://vuejs.org/v2/api/#mounted

票数 24
EN

Stack Overflow用户

发布于 2018-10-04 19:48:37

代码语言:javascript
复制
// vue js provides us `mounted()`. this means `onload` in javascript.

mounted () {
  // we can implement any method here like
   sampleFun () {
      // this is the sample method you can implement whatever you want
   }
}
票数 21
EN

Stack Overflow用户

发布于 2021-12-25 04:04:32

您可以在加载时调用函数,如下所示:

代码语言:javascript
复制
methods:{
     checkAuth: function() {your logic here}
 },
 mounted(){
    this.checkAuth()
 },
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37098229

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档