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

我认为我的控制器没有问题，因为它 returns 支持正确的 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>

OR 您可以将服务器端的 get 查询更改为简单的 return 单个 JSON object 而不是 array 和您的 js 代码应该会自动开始工作：

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

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

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

javascript

dynamic

fetch

laravel

vue.js