使用 Laravel 8 Vue Js 在输入字段中动态显示获取的数据

Question

我在 Laravel 8 中有一个使用 Vue js 的简单注册表单，在提交之前，我需要首先检查引用注册人的用户是否存在于我的数据库中。 如果记录存在，我需要在@change 事件的输入字段中动态显示用户的全名。

这是我的 Vue 组件：

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

这是我的 ResellerController 和 API 路由：

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); 
    }

我想我的控制器没有问题，因为它返回了正确的 JSON 数据

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

但是当我测试我的代码时， uname 是未定义的。

form:Object
   ucode:"williambola_05"
   uname:undefined

谁能帮我这个？

Answer 1

您发出的是您从服务器收到的JSON响应。 您正在从服务器获取JSON Array ，而您的JS代码正在处理JSON object

你可以这样处理：

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

或者您可以更改服务器端的 get 查询以简单地返回单个JSON object而不是array并且您的js代码应该自动开始工作：

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