Dynamically display fetched data in input field using Laravel 8 Vue Js

Question

I have a simple registration form in Laravel 8 using Vue js where I need to check first if the user who refers the person registering exists in my database prior to submitting. if a record exists, I need to dynamically display the user's full name in the input field on the @change event.

Here's my Vue component:

<template>
    <div>
    <h2>TESTING</h2>    

    <form @submit.prevent="submit" >
            <input type="text" class="form-control" v-model="form.ucode" @change="getUser()">
            <input type="text" class="form-control" v-model="form.uname">
    </form>
    </div>
    
    
</template>

<script>
export default {
    data: function(){
        return{
            form: {
                ucode: "",
                uname: "",
            }, 
            
        }
    },
    methods:{
        getUser(){
           axios.get('api/checkUser?ucode=' + this.form.ucode).then(res=>{
               this.form.uname = res.data.first_name
           })
        }   
    }
}

Here's my ResellerController and API route:

Route::get('/checkUser', [ResellerController::class, 'show']); 

public function show()
    {
        $ucode = request('ucode');
        $user = DB::table('resellers')->where('username', $ucode)->select('id', 'first_name')->get();
        return response()->json($user); 
    }

I think I don't have issues with my controller because it returns back the correct JSON data

[{"id":1,"first_name":"William Hardiev"}]

But when I test my code, uname is undefined.

form:Object
   ucode:"williambola_05"
   uname:undefined

Can anyone help me with this?

Answer 1

You issue is the JSON response that you receive from the server. You are getting a JSON Array from the server, whereas your JS code is handling a JSON object

You can handle it like this:

<template>
  <div>
    <h2>TESTING</h2>

    <form @submit.prevent="submit">
      <input
        type="text"
        class="form-control"
        v-model="form.ucode"
        @change="getUser()"
      />
      <input type="text" class="form-control" v-model="form.uname" />
    </form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data: function() {
    return {
      form: {
        ucode: "",
        uname: ""
      }
    };
  },
  methods: {
    getUser() {
      axios.get("api/checkUser/?ucode=" + this.form.ucode).then(res => {
        this.form.uname = res.data[0].first_name;
      });
    }
  }
};
</script>

OR you can just change the get query on the server side to simply return a single JSON object rather than an array and your js code should automatically start working:

$user = DB::table('resellers')
->where('username', $ucode)
->select('id', 'first_name')
->first();