I'm listing projects and those projects have statuses. First I'm listing the statuses and inside them projects, but this returns all the projects no matter what the status.
With Laravel I could just:
foreach ($projects->where($project->status_id == $status->id) as $project)
but how to do that with Vue?
<div v-for="status in statuses">
{{ status.title }}
<div v-for="project in projects">
{{ project.title }}
</div>
</div>
I also tried
<div v-for="status in statuses">
{{ status.title }}
<div v-for="project in filteredprojects">
{{ project.title }}
</div>
</div>
computed:{
filteredProjects() {
return this.projects.filter(function(project) {
return project.status_id == status.id;
})
}
},
But no luck
Try like this:
<div v-for="status in statuses">
{{ status.title }}
<div v-for="project in projects">
<div v-if="status.id === project.status_id">
{{ project.title }}
</div>
</div>
</div>
If you have set up a relationship between status and projects (as you should since you're using Laravel), you can load the relationship before it ever gets to the Vue component.
Controller
$statuses = Status::where(...your conditions...)->with('projects')->get();
// EDIT: or get all statuses without conditions
$statuses = Status::with('projects')->get();
// EDIT 2: get all statuses with conditional projects
$statuses = Status::with(['projects' => function($query) {
// add your conditions for projects
$query->where('completed', 0);
}])->get();
Vue
<div v-for="status in statuses">
{{ status.title }}
<div v-for="project in status.projects">
{{ project.title }}
</div>
</div>
Related
#foreach ($responseBody as $response)
<div class="row">
<div class="col-4">Official Name</div>
<div class="col-8">{{$response->name->official}}</div>
</div>
<div class="row">
<div class="col-4">Currencies</div>
<div class="col-8">{{ $response->currencies???? }}</div>
</div>
#endforeach
I using Laravel to consume API from https://restcountries.com/. I success to get Name of the country, but I still failed to get the currencies. The "SGD" code is different for each country.
How to get the name of currencies?
You should run another loop for the currencies:
#foreach($response->currencies as $id => $info)
<b>{{ $id }}</b>: {{ $info->name }} {{ $info->symbol }}
#endforeach
Im making a laravel SPA and I recently learned how to use vue and I know how v-for works for vue using my components. I only know how to loop only in a single table without relation thats why I'm having a difficult time changing it. I have two tables which are news and comments, and this table news hasMany comments in it.
my blade file for now.
#foreach($news->comments as $comment)
<div class="comment" style="background-color: #f6efef;" >
<div class="author-info">
<img src={{"https://www.gravatar.com/avatar/" . md5(strtolower(trim($comment->email))) . "?s=50&d=retro" }} class="author-image" id="image">
<div class="author-name">
<h4>{{$comment->name}} </h4>
<p class="author-time"> {{ date('jS F, Y - g:iA' ,strtotime($comment->created_at)) }}</p>
</div>
</div>
<div class="comment-content">
{{$comment->comment}}
</div>
</div>
#endforeach
your component goes like this in vue2.0
**block.vue**
<template>
<div class="comment" style="background-color: #f6efef;" v-for="comment in
news.comments" >
<div class="author-info">
<img :src="comment.author_image" }} class="author-image" id="image">
<div class="author-name">
<h4>{{ comment.name }} </h4>
<p class="author-time"> {{ comment.time }}</p>
</div>
</div>
<div class="comment-content">
{{ comment.comment }}
</div>
</div>
</template>
<script>
export default {
name: "block",
props: [ "news" ], //or
data() => ({ news: [] })
}
</script>
I'm setting up a new project and want to retrieve data from passed model binding controller show method but output in show view is null
model :
class Content extends Model
{
protected $fillable = ['title','body'];
}
this is my controller :
public function show(Content $content)
{
return view('content.show',compact('content'));
}
this is my index :
#foreach ($content as $item)
<td>
<a class="btn btn-primary" href="{{ route('Content.show',$item) }}">View</a>
</td>
#endforeach
and this is show method that result is null:
<div class="card-header">
{{ $content->title }}
</div>
<div class="card-body">
{{ $content->body }}
</div>
<div class="card-footer">
{{ $content->created_at }}
/div>
i expect have result in show method because everything is okay but there isn't where is my problem ?
Updated :
dd($content)
because you try to get $content while it is $item now :)
<div class="card-header">
{{ $item->title }}
</div>
<div class="card-body">
{{ $item->body }}
</div>
<div class="card-footer">
{{ $item->created_at }}
</div>
I found the answer
I changed the route resource from resource('Content','ContentController') to
resource('content','ContentController') and the problem has been fixed !
i dont know why !
//used to show a list, like what you are trying to do
public function index()
{
$contents = Content::get();
return view('content.index',compact('contents'));
}
//used to show one item
public function show(Content $content)
{
return view('content.show',compact('content'));
}
What you have for you view works if you are looping over multiple content, otherwise you want:
{{ $content->title }}
</div>
<div class="card-body">
{{ $content->body }}
</div>
<div class="card-footer">
{{ $content->created_at }}
</div>```
I'm having issues displaying a collection in a blade template.
$comments = Comment::all();
return view('comments/index')->with(compact('comments'));
The code for the blade is:
#isset($comments)
#foreach($comments as $comment)
<div>
<p>
<{{ $comment->commentor }}
</p>
</div>
<hr>
#endforeach
#endisset
#empty($comments)
<div>
<p>There were no comments available.</p>
{{ $comments }}
</div>
#endempty
But not sure how to get the data to render in the template. It just renders a blankpage.
Use this instead :
$comments = Comment::all();
return view('comments.index')->with(compact('comments'));
Use dot notation to reference the view folder structure, view('comments.index'). This represents the file resources/views/comments/index.blade.php. Use this.
#forelse ($comments as $comment)
<div>
<p>
{{ $comment->commentor }}
</p>
</div>
<hr/>
#empty
<div>
<p>There were no comments available.</p>
</div>
#endforelse
I have a function witch is getting all properties joining the images tables with orderBy and need to add paginate
here is my function
public function show_all()
{
$properties = PropertyDetail::where('active', 1)->with('propImages')->paginate(15)
->orderBy('id', 'DESC')
->get();
return View::make('portal.properties.view_all', compact('properties'));
}
in my view I got
call_user_func_array() expects parameter 1 to be a valid callback,
class 'Illuminate\Support\Collection' does not have a method 'orderBy'
another thing when I removed the orderBy('id', 'DESC')->get() and I try
it works but when I try to put {{ $prop->links() }} in the view I got
Call to undefined method Illuminate\Database\Query\Builder::links()
here is how my view looks like
#foreach($properties as $prop)
<div class="property col-xs-12 col-sm-6 col-md-4">
<div class="image">
<div class="content imgContainer">
{{ HTML::link('property-details/'.$prop->id, '') }}
#foreach($prop->propImages->slice(0, 1) as $image)
{{ HTML::image('images/propertyImages/'.$image->image, $prop->title) }}
#endforeach
</div>
<div class="price"> OMR. <span class="priceNumber"> {{ $prop->price }}</span></div>
</div>
<div class="title">
<h2>{{ HTML::link('', $prop->title, array('title'=>'$prop->title')) }}</h2>
</div>
<div class="location">{{ trans('location.'.$prop->propLocation->city) }}</div>
<div class="bathrooms">
<div class="content">{{ $prop->bathroom }}</div>
</div>
<div class="bedrooms">
<div class="content">{{ $prop->bedroom }}</div>
</div><!-- /.bedrooms -->
<div class="receptionRoom">
<div class="content">{{ $prop->dining_room }}</div>
</div>
</div>
#endforeach
{{ $prop->links() }}
The correct syntax is:
$properties = PropertyDetail::where('active', 1)
->with('propImages')
->orderBy('id', 'desc')
->paginate(15);