I'm trying vueJS (+ laravel) and i'm encountering a problem.
I made an OrdersComponent.vue with a v-for (for each order which I retrieved from my API), but nothing happens
OrderComponent.vue : (h1 is rendering, and console.log(this.orders) is working)
<template>
<div>
<h1> Commandes </h1>
<div class="card card-body" v-for="order in orders" v-bind:key="order.idCommande">
<h2> {{ order.date }} </h2>
<span> {{ order.statut }} </span>
</div>
</div>
</template>
<script>
import Vue from 'vue'
export default Vue.extend({
data() {
return {
orders: [],
order: {
idCommande: '',
date: '',
prix: '',
statut: '',
},
orderId: '',
edit: false
}
},
methods: {
fetchOrders() {
fetch('api/orders')
.then(res => res.json())
.then(res => {
this.orders = res.data;
console.log(this.orders);
})
}
},
created() {
this.fetchOrders();
}
})
</script>
Page which call the component (orders.blade.php) :
#extends('layouts.app')
#section('content')
<orders></orders>
#endsection
finally, layouts.app file :
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light navbar-laravel">
<div class="container">
<a class="navbar-brand" href="{{ url('./') }}">
MyOnlineCV
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
#else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->username .' '. Auth::user()->email }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('commandes') }}"> Mes commandes </a>
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ url('/logout') }}" method="GET" style="display: none;">
#csrf
</form>
</div>
</li>
#endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
<div id="app">
<div class="container">
#yield('content')
</div>
</div>
</main>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Maybe you have already fixed it but in my case I was using an arrow function in methods but it was not working this way. I had to change it to "normal" function declaration like so:
methods: {
fetchOrders: function() {
fetch('api/orders').then(res => res.json())
.then(res => {
this.orders = res.data;
console.log(this.orders);
});
}
},
Try to remove this from your component`s data() method:
...
order: {
idCommande: '',
date: '',
prix: '',
statut: '',
},
orderId: '',
...
You declare "order" in v-for section:
v-for="order in orders"
May be you forgot to recompile your app after making change.
Remove order object from data()
order:{
idCommande: '',
date: '',
prix: '',
statut: '',
}
and recompile the app using:
npm run dev
Moreover:
We create this kind of objects when we are going to submit some data using a form.
For example
For signup/register, we get user name, email, age, etc and save it into an object like below by calling each value in a template (e.g. user.name)
user:{
name:'',
email:'',
age: '',
}
and then we just send user object via axios or fetch to the server.
Related
m new to vue and after installing it in Laravel, I make a new component but its not showing in browser,and the browser gives warning in developers tools, in developers tools > console it shows:
app.js:37960 [Vue warn]: Failed to mount component:
template or render function not defined.
found in
---> <TaskForm>
<Root>
warn # app.js:37960
app.js:46384 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
is there any problem in code or if any solution to resolve this issue?
component:
<template>
<div class="col-md-8">
<div class="card card-default">
<div class="card-header">Task Form</div>
<div class="card-body">
<form action="./api/task" method="POST">
<div class="form-group">
<input type="text" name="title" placeholder="Task title" class="form-control">
</div>
<div class="form-group">
<input type="submit" value="Add Task" class="btn btn-info">
</div>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
app.js:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component',
require('./components/ExampleComponent.vue').default);
Vue.component("task-form", require('./components/TaskForm.vue'));
const app = new Vue({
el: '#app'
});
this is app.blade.php: app.blade.php:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light navbar-laravel">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
#if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
#endif
#else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
</div>
</li>
#endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
#yield('content')
</main>
</div>
</body>
</html>
There's some part of my project where i have some vuejs content inside of a blade template of course. But it gives me this error: " Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed."
vue-laravel-stripe
My app.js:
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
import StripeForm from './components/StripeForm';
Vue.component('stripe-form', StripeForm);
const app = new Vue({
el: '#app'
});
My app.blade template:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Slabo+27px">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
#stack('styles')
</head>
<body>
#include('partials.navigation')
#yield('jumbotron')
<div id="app">
<main class="py-4">
#if(session('message'))
<div class="row justify-content-center">
<div class="col-md-10">
<div class="alert alert-{{session('message')[0]}}">
<h4 class="alert-heading">
{{ __("Mensaje informativo") }}
</h4>
<p>{{session('message')[1]}}</p>
</div>
</div>
</div>
#endif
#yield('content')
</main>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Here's my vue-component:
<template>
<stripe-checkout
button="Suscribirme"
buttonClass="btn btn-course"
:stripe-key="stripe_key"
:product="product"
>
</stripe-checkout>
</template>
<script>
import {StripeCheckout} from 'vue-stripe';
export default {
components: {
StripeCheckout
},
// name: "stripe-form",
props: {
stripe_key: '',
name: '',
amount: '',
description: ''
},
computed: {
product() {
return {
name: this.name,
amount: parseFloat(this.amount),
description: this.description
}
}
}
}
</script>
Here's where i have it as one of my partials:
<form action="{{ route('subscriptions.process_subscription') }}" method="POST">
#csrf
<input
class="form-control"
name="coupon"
placeholder="{{ __("¿Tienes un cupón?") }}"
/>
<input type="hidden" name="type" value="{{ $product['type'] }}"/>
<hr/>
<stripe-form
stripe_key="{{ env('STRIPE_KEY') }}"
name="{{ $product['name'] }}"
amount="{{ $product['amount'] }}"
description="{{ $product['description'] }}"
></stripe-form>
</form>
And here i include it on a template:
#extends('layouts.app')
#push('styles')
<link rel="stylesheet" href="{{ asset('css/pricing.css') }}">
#endpush
#section('jumbotron')
#include('partials.jumbotron', [
'title' => __("Subscríbete ahora a uno de nuestros planes"),
'icon' => 'globe'
])
#endsection
#section('content')
<div class="container">
<div class="pricing-table pricing-three-column row">
<div class="plan col-sm-4 col-lg-4">
<div class="plan-name-bronze">
<h2>{{ __("MENSUAL") }}</h2>
<span>{{ __(":price / Mes", ['price' => '€ 9,99']) }}</span>
</div>
<ul>
<li class="plan-feature">{{ __("Acceso a todos los cursos") }}</li>
<li class="plan-feature">{{ __("Acceso a todos los archivos") }}</li>
<li class="plan-feature">
#include('partials.stripe.form', [
"product" => [
"name" => __("Suscripción"),
"description" => __("Mensual"),
"type" => "monthly",
"amount" => 999,99
]
])
</li>
</ul>
</div>
<div class="plan col-sm-4 col-lg-4">
<div class="plan-name-silver">
<h2>{{ __("Trimestral") }}</h2>
<span>{{ __(":price / 3 meses", ['price' => '€ 19,99']) }}</span>
</div>
<ul>
<li class="plan-feature">{{ __("Acceso a todos los cursos") }}</li>
<li class="plan-feature">{{ __("Acceso a todos los archivos") }}</li>
<li class="plan-feature">
#include('partials.stripe.form',
["product" => [
'name' => 'Suscripción',
'description' => 'Trimestral',
'type' => 'quarterly',
'amount' => 1999.99
]]
)
</li>
</ul>
</div>
<div class="plan col-sm-4 col-lg-4">
<div class="plan-name-gold">
<h2>{{ __("ANUAL") }}</h2>
<span>{{ __(":price / 12 meses", ['price' => '€ 89,99']) }}</span>
</div>
<ul>
<li class="plan-feature">{{ __("Acceso a todos los cursos") }}</li>
<li class="plan-feature">{{ __("Acceso a todos los archivos") }}</li>
<li class="plan-feature">
#include('partials.stripe.form',
["product" => [
'name' => 'Suscripción',
'description' => 'Anual',
'type' => 'yearly',
'amount' => 8999.99
]]
)
</li>
</ul>
</div>
</div>
</div>
#endsection
Notes:
I've changed the script outside to inside the body tag and the opposite, and nothing, checked the tags and nothing
This library is injecting the script into your form. You can see the logic at this line
It's looping your scripts to determine if you load the library externally, and if not it's appending it to your form:
if(!scriptExists) {
document.querySelector("#"+this.formId).appendChild(el);
}
So the way to solve it is to simply include it on the page yourself:
<script src="https://checkout.stripe.com/checkout.js"></script>
Which will prevent it from injecting the script into the form and will stop the VNODE from complaining about the presence of <script></script> tags in it.
For many users, this is due to them not closing all their HTML-tags correctly.
It did the trick for me and many others:
https://github.com/vuejs/vue-loader/issues/302
try closing out your HTML by adding just before your #endsection. Vue is trying to parse with your script as Vue is initialized on the wrapper, it will throw errors, as the page is mixed with scripts.
add and see if that solves your problem
just want to ask a question, if I want to disable the sidebar menu page in my login page, how would I do that? In the first place, is it possible? If it is possible could you show me some example or even give me a link for me to reference to see how to do it. Because I still can access my data even without logging in through the sidebar so I want to disable it if possible. Thanks in advance
If you need me to show my code just ask, I will put it in asap.
app.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>#yield('title')</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/title.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#include('layouts.testSidebar')
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}" style="color: white">
#yield('title')
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" style="background-color:blue">
<b style="color: white">{{ Auth::user()->name }}</b> <span class="caret"></span>
</a>
<ul class="dropdown-menu" style="background-color: blue">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();" style="background-color: blue">
<b style="color: white">Logout</b>
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
If u dont want to show the Left Side Of Navbar for the not logged in user try the below
#if(Auth::check())
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
#endif
I have already asked this question already(closed due to inactivity) and I have been trying many different methods to solve it but it still doesn't work. I even try removing all those related to vue inside laravel by following many different kind of website where they all told me to remove the vue dependency. (here is one of the link that I followed, https://mattstauffer.com/blog/removing-all-vue-dependencies-from-laravel/) I even replaced the app.js with a new one created from scratch since in the past I didn't do anything to it
Can somebody please help me, I am stuck in this problem for quite a long time already and I really don't know what to do. All I want is to solve this error "[Vue warn]: Error compiling template:" since it is affecting the navbar in my webpage
I am using laravel framework 5.5.7 and I didn't even update my laravel to get until this vue. And also I don't even recall installing vue into my laravel.
This is the error they given me:
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
(found in <Root>)
app.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<html>
<head>
<title>SideBar Menu</title>
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
</head>
<body>
<div id="sidebar">
<ul>
<li>Summary</li>
<li>Deleted Records</li>
<li class="dropdown">
Edit User Information <span class="caret"></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Personal Information Edit</li>
<li>Driver License Class Edit</li>
</ul>
</li>
<li class="dropdown">
Evaluation <span class="caret"></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Evaluation</li>
</ul>
</li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</body>
</html>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}" style="color: white">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<div id="center-text">
<ul class="nav navbar-nav navbar-center" id="nav-center">
<li>
<h3>#yield('title')</h3>
</li>
</ul>
</div>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" style="background-color:blue" style="color:white">
<b>{{ Auth::user()->name }}</b> <span class="caret"></span>
</a>
<ul class="dropdown-menu" style="background-color: blue">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();" style="background-color: blue" style="color: white">
<b>Logout</b>
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
I'm trying to show users in my view, but i have this error Undefined variable: users
I don't know what is the problem, because in my controller for that view the user method is called.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
use App\Role;
use App\Http\Requests;
class pagesController extends Controller
{
public function viewIndex(){
$users = User::all();
return view('index', ['users' => $users]);
//return view('index');
}
}
And this is the route where my controller is called
Route::get('/index', [
'uses' => 'pagesController#getIndex',
'as' => 'admin',
'middleware' => 'roles',
'roles' => ['Admin']
]);
This is my blade file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Laravel Blog</title>
<!-- CHANGE THIS TITLE FOR EACH PAGE -->
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Default Bootstrap Navbar -->
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#if (Auth::guest())
<li><a class="btn btn-default" href="{{ url('/login') }}">Login</a></li>
<li><a class="btn btn-default" href="{{ url('/register') }}">Register</a></li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
#foreach($users as $user)
#if($user->hasRole('Admin'))
<li>Edit users</li>
<li>
<a href="{{ url('/logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
#else
<li>Edit page</li>
<li>
<a href="{{ url('/logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
#endif
#endforeach
</ul>
</li>
#endif
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<h1>Welcome to My Blog!</h1>
<p class="lead">Thank you so much for visiting. This is my test website built with Laravel. Please read my popular post!</p>
</div>
</div>
</div>
</div>
<!-- end of .container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
Any ideas?
I think you're pointing to wrong controller method in your routes.
Your route will be:
Route::get('/index', [
'uses' => 'pagesController#viewIndex',
'as' => 'admin',
'middleware' => 'roles',
'roles' => ['Admin']
]);
and your controller (pagesController) will go like this:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
use App\Role;
use App\Http\Requests;
class pagesController extends Controller
{
public function viewIndex(){
$users = User::all();
return view('index', compact('users'));
}
}
I think this will help to solve your problem.
Note: Please follow the naming conventions in your code so that it would be easy to understand and some frameworks (like laravel itself) runs on some followed conventions.
Thanks!