首页 > 解决方案 > 有什么方法可以显示来自 api 的数据吗?

问题描述

我正在构建一个水疗中心,我需要从控制器获取数据我从 API 获取数据,但我无法在我的 vue 控制器中显示数据。

   export default {
 data() {
    return {
      ids:{},
        form: new Form({
          name:'',
          relation:'',
          gender:'',
          dob:'',
          marriage_status:'',
          matrimonial:'',
          email:'',
          mobile:'',
          father_name:'',
          mother_name:'',
          address:'',
          city:'',
          state:'',
          occupation:'',
          department:'',
          post_graduate_degree:'',
          post_graduate_university:'',
          post_graduate_university_city:'',
          post_graduate_university_state:'',
          post_graduate_university_percentage:'',
          post_graduate_year_of_passing:'',
          graduate_degree:'',
          graduate_university:'',
          graduate_university_city:'',
          graduate_university_state:'',
          graduate_university_percentage:'',
          graduate_year_of_passing:'',
          class_12_board : '',
          class_12_school_name:'',
          class_12_percentage:'',
          class_12_year_of_passing:'',
          class_12_city:'',
          class_10_board:'',
          class_10_school_name:'',
          class_10_percentage:'',
          class_10_year_of_passing:'',
          class_10_city:'',
          username:'',
          password:''

          })
        }
      },
    methods:{
  loaduser(){

   axios.get('api/userDetails').then(function (response) {
// handle success
 this.ids = response.data;
    console.log(response.data);
  console.log(this.ids);
  })
   },
      created() {
      this.loaduser();
   }
    }

我从 api 获取数据,但我无法将该数据保存在 ids 对象中。如何实现。

我已经尝试过 this.ids = response.data 但它不起作用。

我想在 ids 对象中获取用户详细信息,例如用户名、姓名、电子邮件等。或者如果有任何其他好的方法可以做到这一点。这是我的控制器文件

 <?php

namespace App\Http\Controllers\API;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\UserDetail;
use App\User;
use Illuminate\Support\Facades\Hash;
use Auth;

class UserDetailsController extends Controller
{

public function __construct()
{
 $this->middleware('auth:api');

}

/**
 * Display a listing of the resource.
 *
 * @return \Illuminate\Http\Response
 */
public function index()
{
  return auth('api')->user();
//return $user = Auth::user();
 }

标签: laravelvuejs2

解决方案


你错过的一件事是 "this" 。您正在将数据分配给局部变量。在这里我更新了代码

export default {
  data() {
    return {
      ids:{},
      //
    },
  methods:{
    loaduser(){
      axios.get('api/userDetails').then(function (response) {
        // handle success
        this.ids = response.data;
        console.log(response.data);
        console.log(this.ids);
      })
    },
    //
  }
}

推荐阅读