Vue component does not render html under hidden dropdown-menu - laravel

<div class="dropdown notification-dropdown" data-toggle="dropdown">
<img src="{{ asset('front/img/notification-bell-ico.svg') }}" alt="">
<ul class="dropdown-menu">
<div class="card notification-card">
<div class="card-header">
<p>Notification</p>
See all
</div>
<notification :user="{{ auth()->user() }}"></notification>
</div>
</ul>
</div>
I am loading my vue component as notification as seed in above code but some how it does not render html when i click header bell icon to open it
I don't know how to resolve it
if any help will be greatly appreciated.
thanks in advance.

Your snippet looks like a blade template and notification bells are often in a site's header area. It's possible your header is not within the root element you've got Vue controlling.

Related

How to change which template is extended based on user authentication

I am using Laravel 6.20.11, and I have published the Laravel blade error templates. What I need to have happen is that if the user is authenticated, the error message extends the internal-only layout, and if not, it extends the public layout like so:
#auth
#extends ('int-layouts.partials.wrapper')
#section ('error')
<div class="be-content">
<div class="main-content container-fluid">
<div class="container py-5">
<div class="row">
<div class="col-lg-8">
<div class="text-block">
<h1>404 - Not Found</h1>
<p class="text-muted text-uppercase mb-4">Sorry, we couldn't find the page you were looking for.
Please contact the administrator<br/>
Or go back to the <a class="navbar-brand py-1" href="/controlpanel/">Dashboard</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
#endsection
#endauth
#guest
#extends ('ext-layouts.master')
#section('error')
<div class="container py-5">
<div class="row">
<div class="col-lg-8">
<div class="text-block">
<h1>404</h1>
<p class="text-muted text-uppercase mb-4">Sorry,You are trying to reach the page that does not exist.<br>
Please contact the administrator <br/> Or go back to the <a class="navbar-brand py-1" href="/">Home Page</a></p>
</div>
</div>
</div>
</div>
#endsection
#endguest
The problem I am having is that when I test the 404 error using abort(404) or by trying to access a route that doesn't exist, the error message displays twice and the page inherits the int-layouts.partials.wrapper even when the user isn't authenticated.
Is this expected behavior or am I doing something wrong in my blade file?
You can try to use a conditional in one #extends directive:
#extends (auth()->check() ? 'int-layouts.partials.wrapper' : 'ext-layouts.master')
Then you can use a conditional after this inside your section.
#section('error')
#auth
#else
#endif
#endsection
The #extends directive is not actually returning output directly into the compiled result like most directives do. The compiled PHP for this is held in an array to be added later.
Everything inside the ( ) of the directive is being used as a literal to call make on the View Factory:
"<?php echo \$__env->make({$expression}, \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>"
If you found the compiled view for this Blade template you would see this:
<?php echo \$__env->make(auth()->check ? 'int-layouts.partials.wrapper' : 'ext-layouts.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
The first argument to make ends up being your view name when this compiled view is executed.
In Controller function:
$layouts = Auth::user->admin ? 'view.admin' : 'view.student'; //
view.admin or view.student is the blade file which you want to render
dynamically.
return view('welcome',compact('layouts'));
Write in Blade File:
#extends($layouts)
#section('...')
...
#endsection

Laravel 6 view include from sub directory not working

I need to include two blade files navbar & sidebar (located in views/layouts/partials) in another blade template named admin.blade.php (located in views/layouts). So in admin.blade.php. I wrote
<div class="page-body">
#include('partials.sidebar')
<div class="page-content-wrapper">
<div class="page-content-wrapper-inner">
<div class="content-viewport">
#include('partials.content')
</div>
</div>
</div>
</div>
it gives me this error:
Facade\Ignition\Exceptions\ViewExceptionView [partials.navbar] not
found.
Can you help me? thanks in advance.
You should put layouts as part of the path, so your template code should be like below:
div class="page-body">
#include('layouts.partials.sidebar')
<div class="page-content-wrapper">
<div class="page-content-wrapper-inner">
<div class="content-viewport">
#include('layouts.partials.content')
</div>
</div>
</div>
</div>

Laravel 5 Blade Mystery

I am having a curious blade problem.
I have an edit blade that is rendering, but not with the master blade. Debugbar shows that both views (master and delete) are being shown. They are not!
Other blades used in conjunction with master all work. I tried duplicating those blades and inserting the specific data to no avail.
I have cleared history in the browser and done php artisan cache:clear. Nothing.
Master Blade is working for all other renderings. Here is detail:
<div class="intro">
<section>
#yield('intro')
</section>
</div>
This blade works and is rendered with the master:
#extends('layouts.master')
#section('title')
Your Profile
#stop
#section('head')
#stop
#section('intro')
<div class="output">
<h2>Your Pets</h2>
<div>
</div>
#if(sizeof($pets) == 0)
No pets
#else
#foreach($pets as $pet)
<div class="p1">
<h3>{{ $pet->petName }}</h3>
<p><img src='{{ $pet->photo }}' width="200px" height="200px"></p>
<p>{{ $pet->breed }}</p>
<a href='/profile/edit/{{$pet->id}}'>Edit</a> |
<a href='/profile/confirm-delete/{{$pet->id}}'>Delete</a>
</div>
#endforeach
#endif
</div>
#stop
#section('body')
#stop
This blade renders but with no master! Debugbar says that both views are rendering. Ha!
#extends('layouts.master')
#section('title')
Delete Your Pet
#stop
#section('head')
#stop
#section('intro')
<div class="output">
<h1>Delete Pet</h1>
<p>
Are you sure you want to delete <em>{{$pets->petName}}</em>?
</p>
<p>
<a href='/profile/delete/{{$pets->id}}'>Yes...</a>
</p>
</div>
#stop
#section('body')
#stop
Anyone seen this?
#stop was removed from the docs as of 5.1, so I would guess it is probably no longer supported. Use #endsection instead.
http://laravel.com/docs/5.1/blade

Angular Meteor (blaze #if and ui-view)

{{#if currentUser}}
<div ng-app="appy">
Home
Page
<div ui-view></div>
</div>
{{else}}
Here will be logIn page
{{/if}}
Goal is to render menu and content only to logged users, if not logged render login page. problem is {{#if currentUser}} makes my ui-view element to not render templates it shuld.
How to repair it ?
Try this:
<div ng-app="appy">
<div ng-show="$root.currentUser">
Home
Page
<div ui-view></div>
</div>
<div ng-hide="$root.currentUser">
Here will be logIn page
</div>
</div>

Kendo UI TabStrip Helper

I am newbie in Telerik (Kendo). I want to know how can I hide or show tab based on roles or authentication as per user. I guess its been done by Helper, but I am not sure how to do it.
Please help me regarding this.
Thanks in advance.
Regards,
DS
Its a bit difficult to provide you with the best answer without seeing what you have so far, but if your initializing the TabStrip using JavaScript you will have a list if tabs in your html:
<div id="example">
<div id="tabstrip">
<ul>
<li id="TabParis" class="k-state-active">
Paris
</li>
<li id="TabNewYork">
New York
</li>
<li id="TabLondon">
London
</li>
</ul>
<div>
<div class="weather">
<h2>17<span>ºC</span></h2>
<p>Rainy weather in Paris.</p>
</div>
<span class="rainy"> </span>
</div>
<div>
<div class="weather">
<h2>29<span>ºC</span></h2>
<p>Sunny weather in New York.</p>
</div>
<span class="sunny"> </span>
</div>
<div>
<div class="weather">
<h2>21<span>ºC</span></h2>
<p>Sunny weather in London.</p>
</div>
<span class="sunny"> </span>
</div>
</div>
Give each of the tab list items an id.
Then simply show or hide the list item by Id using JQuery
$('#TabNewYork').hide()
Here is a working example in JSFiddle: http://jsfiddle.net/loanburger/9mLz5wnc/

Resources