我们如何处理 vuejs 中的响应？

Question

大家好，我是 Vuejs 的新手，无法获得我想要的输出。

我的任务是根据来自控制器的响应重定向用户。

如果 status = success 它应该重定向到 home route
如果 status = failed 它应该重定向到 someone else route

我的登录页面：

<template>
    <div>
        <h3 class="text-center text-primary font-weight-bold" >User Login</h3>
        <div class="row">
            <div class="col-md-6">
                <form @submit.prevent="userLogin">
                    <div class="form-group">
                        <label>Username</label>
                        <input type="text" class="form-control"  v-model="userData.email">
                    </div>
                    <div class="form-group">
                        <label>Password</label>
                        <input type="text" class="form-control"  v-model="userData.password">
                    </div>
                    <button type="submit" class="btn btn-primary">Login</button>
                </form>
            </div>
        </div>
    </div>
</template>
 
<script>
    export default {

            data() {
                return {
                   userData: {}
                }
            },
            methods: {
                userLogin() {
                    this.axios
                        .post('http://localhost:8000/api/login', this.userData)
                        .then(response=> (
                            if( response.status == 'success' ){
                                     this.$router.push({ name:   'home' })
                            }
                            else {
                                this.$router.push({ name:   'login' })
                            }
                           
                        ))
                        .catch(err => console.log(err))
                        .finally(() => this.loading = false)
                }   
            } 
    }
</script>

Answer 1

我对 Vue js 不是很熟悉。不过你可以试试下面的方法。

Controller

您可以根据条件动态发送路由名称如下

if ( Auth::attempt(array('email' => $request->email, 'password' => $request->password )) ) {
    return response()->json(['status'=>'success','message'=>'Login successfullly!', 'route'=>'home', 'blabla'=> soemData );
} else {
    return response()->json(['status'=>'fail','message'=>'username or password is invalid!', 'route'=>'login']);
}

on view side you can do In Method like following

yourFunctionName() {
    this.axios
        .post('http://url-to-controller-or-whaerve', this.userData)
        .then(response => (
            this.$router.push({ name:   response.data.route })
        ))
        .catch(err => console.log(err))
        .finally(() => this.loading = false)
}

希望对您有所帮助。特纳克斯

我们如何处理 vuejs 中的响应？

How can we handle the response in vuejs?

laravel

vue.js

vuejs2

vuejs3