How to pass Sql row data to Vue file (Laravel Project)

Question

i'm trying to pass a data and use it inside Vue file but i cant get it to work here's my code

<template>
    <div class="row profile-container">
        <div class="col-sm-4">
            <img src="/img/default.jpg" alt="" class="profile-img">
        </div>
        <div class="col-lg">
            <h5>{{$user->name}}</h5>
            <div class="card w-100">

                <ul class="list-group list-group-flush">
                    <li class="list-group-item">Cras justo odio</li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                </ul>
            </div>
        </div>
    </div>
</template>

Here's the profile controller which returns to profile with data

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;

class ProfileController extends Controller
{
    public function index($id)
    {
        $user = User::where('unique_id', $id)->firstOrFail();

        return view('pages.profile')->with('user', $user);
    }
}

Here's the app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('welcome', require('./components/Welcome.vue').default);
Vue.component('profile', require('./components/Profile.vue').default);


const app = new Vue({
    el: '#app'
});

Routes

Route::get('/', 'PagesController@index' );

Auth::routes();

Route::get('/logout', '\App\Http\Controllers\Auth\LoginController@logout');
Route::get('/profile/{id}', 'ProfileController@index');

Here's the blade file pip didly doo i dont know what to write anymore it lookslikemy post is mostly code so ill just add some details here, thatsprettycoolshaggyisgod i dont know what else to add here please send help

@extends('layouts.master')
@section('title')
  <title>Profile</title>
@endsection
@section('content')
  @if(Auth::user()->type==='user')
  <profile></profile>
@elseif (Auth::user()->type==='admin')
  <h1>Hi Admin</h1>
@endif
@endsection

Please can you add the blade file where you're including the vue component? — Rwd
– Rwd, Commented Jan 31, 2019 at 20:51

CodeBoyCode · Accepted Answer · 2019-01-31 16:58:53Z

your script should look something like this:

<script>
    export default {
        name: 'profile',
        data() {
            return {
                user: []
            }
        },
        methods: {
            getUser() {
                let _this = this;
                axios.get('/user')
                    .then(function (response) {
                        _this.user = response.data;
                    }).catch(function (error) {
                        console.log(error);
                });
            },
        created() {
            this.getUser();
        }
    }
</script>

add this to your routes file:

Route::get('/brands', function($id) {
  $user = User::where('unique_id', $id)->findOrFail();
  return view('pages.profile')->with('user',$user);
});

let me know if that helps, i think you've missed out a lot of code, it's not as easy as passing data through to a Laravel view, but hopefully that gets you started

Collectives™ on Stack Overflow

How to pass Sql row data to Vue file (Laravel Project)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related