无法使用Vue和Laravel后端发布记录

时间:2019-08-18 12:04:46

标签: javascript php laravel vue.js

当我尝试使用laravel API从vue组件向我的SQL提交记录时,没有任何反应。我已经将我的代码与其他工作代码进行了比较,但似乎没有任何效果。

这是我的register方法:

register() {
  axios
    .post('/api/register', this.user)
    .then(res => {
      console.log(user)
    })
    .catch(err => {
      console.log(err.message)
    })
},

这是注册表:

<template>
  <form>
    <div class="form-group">
      <input
        type="text"
        v-model="user.name"
        name="username"
        class="form-control"
        id="name"
        placeholder="Email or username"
      />
      <div class="validation"></div>
    </div>
    <div class="form-group">
      <input
        v-model="user.email"
        type="email"
        class="form-control"
        name="email"
        id="password"
        placeholder="Your Email"
      />
      <div class="validation"></div>
    </div>
    <div class="form-group">
      <input
        v-model="user.password"
        type="password"
        class="form-control"
        name="password"
        placeholder="Your Password"
        data-rule="password"
      />
      <div class="validation"></div>
    </div>
    <div id="errormessage"></div>
    <div class="text-center">
      <button type="submit" title="Register" v-on:click="register">Login</button>
    </div>
  </form>
</template>

我的Laravel页面:

<section id="pricing" class="wow fadeInUp section-bg">
  <div class="container">
    <header class="section-header">
      <h3>Register</h3>
      <p>Come prepared!!</p>
    </header>

    <div class="row flex-items-xs-middle flex-items-xs-center">
      <div class="col-xs-12 col-lg-6">
        <div class="card">
          <div class="card-header">
            <div id="app">
              <register></register>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

这是我的控制人:

if ($v->fails())
    {
        return response()->json([
            'status' => 'error',
            'errors' => $v->errors()
        ], 422);
    }
    $user = new User;
    $user->name = $request->name;
    $user->email = $request->email;
    $user->password = Hash::make($request->password);
    $user->save();
    return response()->json(['status' => 'success'], 200);
}

该记录应该成功发布,但是什么也没有发生。我只在url上看到这样的参数,并且在控制台上没有任何错误。

1 个答案:

答案 0 :(得分:1)

您需要先阻止默认的表单提交行为,然后触发自己的register方法。

<form @submit.prevent="register">