javascript - 无法使用 vue 和 laravel 后端发布记录

Question

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

这是我的注册方法:

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>

这是我的 Controller :

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 上看到参数，我在控制台上没有收到任何错误。

Answer 1

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

<form @submit.prevent="register">