My route is:
Route::get('header','HomeController#header')->name('header');
My functionality is:
public function header()
{
$header=ParentCategory::latest()->get();
return view('includes.header',compact('header'));
}
My view foreach loop is here:
#foreach($header as $pc)
<li class=" aligned-left parent dropdown " >
<a href="index7fa3.html?route=product/category&path=18"
class="dropdown-toggle" data-toggle="dropdown">
<span class="menu-title">{{$pc->name}}</span><b class="caret"></b></a>
#endforeach
I don't want to write their route which name is header, mention in browser I want to work my foreach loop without route name, header.
You can check for your variable first before looping through it:
#if($header)
#foreach($header as $pc)
<li class=" aligned-left parent dropdown " >
<a href="index7fa3.html?route=product/category&path=18"
class="dropdown-toggle" data-toggle="dropdown">
<span class="menu-title">{{$pc->name}}</span><b class="caret"></b>
</a>
</li>
#endforeach
#endif
Related
I have this method when I click to view any member it shows the detail of the member in the modal, but it's not working as I expected
vue js code
const member_modal = ref(null);
const viewMember = (member) => {
axios.get("/api/member/" + member.id).then((response) => {
member_modal.value = response.data;
console.log(member_modal.value);
$("#viewMemberModal").modal("show");
});
};
code inside the modal (DOM)
<a href="#" #click.prevent="viewMember(member)"
><i class="fa fa-eye ml-2"></i
></a>
<img class="profile-user-img img-fluid img-circle"
src="{{ member_modal.image }}"
alt="User profile picture"
/>
</div>
<h3 class="profile-username text-center">
{{ member_modal.full_name }}
</h3>
<ul class="list-group list-group-unbordered mb-3">
<li class="list-group-item">
<b>Gender</b>
<a class="float-right">{{ member_modal.gender }}</a>
</li>
<li class="list-group-item">
<b>Phone</b>
<a class="float-right">{{ member_modal.phone }}</a>
</li>
<li class="list-group-item">
<b>Email</b>
<a class="float-right">{{ member_modal.email }}</a>
</li>
</ul>
I want when I click on the view member button it shows the specific member data in the modal, but it's not updating the values in the (dom), when I click the view member, it fetches the data from the database successfully and assigns the response result to the member_modal but the change is not showing the data in the modal
I have a problem when I use the following code for adding and displaying:
<a href="javascript:void(0)" data-toggle="modal" data-target="#modalYear">
<span class="sub-item">Add year</span>
</a>
<a href="javascript:void(0)" data-toggle="modal" data-target="#ListYear">
<span class="sub-item">Listyear</span>
</a>
Nothing gets blocked but the problem comes when I want to use the edit option the admin menu stops scrolling, this is where the problem starts and also when I use this :
<a href="javascript:void(0)" wire:click="ShowReportModal('add')">
span class="sub-item">Add Year</span>
</a>
the modal will show up but when I close it the admin menu stops scrolling.
After so many tries I figured out that the problem is using wire:click to call the modal for adding, editing and displaying.
this is my component:
public function ShowReportModal($action)
{
if($action == 'add')
{
$this->dispatchBrowserEvent('ModalYearVisible') ;
}
else{
$this->dispatchBrowserEvent('ModalListVisible') ;
}
}
Here is the admin menu code:
<li class="nav-item">
<a data-toggle="collapse" href="#annee">
<i class="far fa-calendar-alt"></i>
<p>Scholar year</p>
<span class="caret"></span>
</a>
<div class="collapse" id="annee">
<ul class="nav nav-collapse">
<li>
<a href="javascript:void(0)" wire:click="ShowReportModal('add')">
<span class="sub-item">Add year</span>
</a>
</a>
</li>
<li>
<a href="javascript:void(0)" wire:click="ShowReportModal('list')">
<span class="sub-item">Years List</span>
</a>
</li>
</ul>
</div>
</li>
Any help would be appreciated and also why is this happening?
I have a categories table which contains let say 10 columns. Now i want to show all these categories in a navbar in such a way that 5 categories names comes first on the navbar and the rest of the 5 categories should be displayed inside a drop down next to first 5 categories, since in case i have 100 categories i cant loop through them all to show them side by side.
<div class="menu-desktop">
<ul class="main-menu">
#if(count($categories)>0)
#foreach($categories as $category)
<li class="active-menu">
{{ ucwords($category->name) }}
<ul class="sub-menu">
<li>Mens</li>
<li>Women</li>
<li>Both</li>
</ul>
</li>
#endforeach
#endif
</ul>
</div>
currently my view look like that where im just looping through the categories and showing them side by side
One possibility is loop through the first five items using slice inside the foreach. slice returns a slice of the collection starting at the given index. If you would like to limit the size of the returned slice, pass the desired size as the second argument to the method.
Then check if there are more than five categories. If true, loop again through the remaining items.
See my code below, I am using bootstrap but you are not required to. Pay attention to the pair of #if and #foreach.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
#if(count($categories)>0)
<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">
<ul class="navbar-nav mr-auto">
#foreach($categories->slice(0, 5) as $category)
<li class="nav-item">
<a class="nav-link" href="#">{{ $category->name }}</a>
</li>
#endforeach
#if(count($categories)>5)
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More categories
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
#foreach($categories->slice(5) as $category)
<a class="dropdown-item" href="#">{{ $category->name }}</a>
#endforeach
</div>
</li>
#endif
</ul>
</div>
#endif
</nav>
I'm working on a Laravel project and i use VueJS for notifications system.
However, i'm a real noob in VueJS dev'. Consequently, i don't know how to print a variable as text.
Situation : System of notifications work and i would like to print the number of notifications in a bootsrap badge. So, i did this :
<i class="fa fa-bell-o" aria-hidden="true"></i> Notifications <span id='badge' class="badge badge-info">{{notifications.length}}</span> <span class="caret"></span>
With this code in my Notification.vue file :
<template>
<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>
<i class="fa fa-bell-o" aria-hidden="true"></i> Notifications <span id='badge' class="badge badge-info">{{notifications.length}}</span> <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li style="text-align:center" v-for="notification in notifications">
<a href="#" v-on:click="MarkAsRead(notification)">
{{notification.data.idea.name}} a été validée !<br>
</a>
</li>
<li style="text-align: center" v-if="notifications.length==0">
Aucune notification !
</li>
</ul>
</li>
</template>
<script>
export default {
props: ['notifications'],
methods: {
MarkAsRead: function (notification) {
var data = {
id: notification.id
};
axios.post('/notification/read', data).then(response => {
window.location.href = "/manif/";
});
}
}
}
</script>
Finally i only see {{notifications.length}} write in the badge instead of a number...
Can you help me about this ?
Thank's
The raw mustache tags are shown because you've used v-pre directive in the parent element, which tells Vue to not compile the element and its children:
<a id="navbarDropdown" ... v-pre> <!-- Don't use v-pre here -->
...
<span ...>{{notifications.length}}</span>
</a>
Simply removing that directive should resolve the issue: demo
I made a page with a categories list on the left and threads on the right side. List of categories are dynamically displayed with CRUD in different controller as threads. And all that works.
ForumThread controller index method:
public function index()
{
$threads = ForumThread::orderBy('id', 'desc')->paginate(10);
$categories = ForumCategory::with('threads')->get();
return view('forum.thread.index', compact('threads', 'categories'));
}
threads belongs to categories of course and view with categories part look like this:
<div class="col-md-3">
<ul class="list-group">
<a href="{{route('forum.index')}}" class="list-group-item">
<span class="badge">{{$threads->count()}}</span>
All categories
</a>
#foreach ($categories as $category)
<a href="#" class="list-group-item">
<span class="badge">{{$category->threads->count()}}</span>
{{$category->name}}
</a>
#endforeach
</ul>
</div>
The thing I want is to set a href link to go to threads that belongs to that specific category that is clicked.
I presume that I need a new method for this (I presume because I don't know how to make this happened in index method) so I made one:
public function showThreads($id)
{
$showThreads = ForumCategory::with('threads')->findOrFail($id);
return view('forum.thread.index', compact('showThreads'));
}
route:
Route::get('/forum/category/{id}', 'ForumThreadController#showThreads')->name('category.threads');
and when I set id for example '/forum/category/3' and try function dd(showThreads->thread); it shows me an array of threads which belongs to that category id.
But now I don't know how to implement this in this foreach loop that already working for category list. I tried like this:
<div class="col-md-3">
<ul class="list-group">
<a href="{{route('forum.index')}}" class="list-group-item">
<span class="badge">{{$threads->count()}}</span>
All categories
</a>
#foreach ($categories as $category)
<a href="{{ route('category.threads', $showThreads->id) }}" class="list-group-item">
<span class="badge">{{$category->threads->count()}}</span>
{{$category->name}}
</a>
#endforeach
</ul>
</div>
but it shows me error: Undefined variable: threads
Any help?