CODEWITHSUNDEEP
javascriptphplaravelvue.js
Emmanuel Enyinnaya
Emmanuel Enyinnaya

Reputation: 111

Unable to post record using vue and laravel backend

When i try to submit a record to my SQL from vue component with laravel API nothing happens. I have compared my code to other working code but nothing seem to work.

Here is my register method:

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

Here is the register form:

<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>

My laravel page:

<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>

Here is my 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);
}

The record should post successfully, however nothing happens. I only see the parameters on my url like so, and I don't get any error on console.

Upvotes: 1

Views: 35

Answers (1)

Ahmad H.
Ahmad H.

Reputation: 370

You'll need to prevent the default form submission behavior first, then trigger your own register method.

<form @submit.prevent="register">

Upvotes: 1

Related Questions