I am using Laravel 8 to fetch data from database in the controller, which i am fetching successfully, i tried to view it using dd (in controller and in blade file as well) and received the array. Here is my code
This is my controller function
public function show($roomAd)
{
$showRoom = RoomAd::where('id',$roomAd)->get();
// dd($showRoom);
return view('seller/singleprod',compact('showRoom'));
}
here is my singleprod.balde.php file
<div class="wrapper row">
{{-- {{dd($showRoom)}} --}}
#if (!empty($showRoom))
<div class="preview col-md-6">
<div class="preview-pic tab-content">
<div class="" id=""><img src="{{ URL::to('/image') }}/{{ $showRoom->advert_image }}"
alt="room-ad-{{ $showRoom->id }}" /></div>
</div>
</div>
<div class="details col-md-6">
<h3 class="product-title">{{ $showRoom->advert_title }}</h3>
<p class="product-description">{{ $showRoom->advert_desc }}</p>
<h4 class="price">Rent: <span>${{ $showRoom->rent_with_duration }}</span></h4>
<h5 class="sizes">size:
<span class="size" data-toggle="tooltip" title="small">{{ $showRoom->room_size }}</span>
</h5>
<h5 class="area">Area:
<span class="color orange not-available" data-toggle="tooltip" title="Not In store"></span>
<span>{{ $showRoom->area }}</span>
<span class="color blue"></span>
</h5>
<div class="action">
<button class="add-to-cart btn btn-default" type="button">add to cart</button>
<button class="like btn btn-default" type="button"><span
class="fa fa-heart"></span></button>
</div>
</div>
#else
{{ 'Error' }}
#endif
</div>
My problem is i am not able to retrieve the data on specific div like $showRoom->advert_image, it shows the error
Exception Property [advert_image] does not exist on this collection instance.
don't use get() use first() if you are only getting single record.
$showRoom = RoomAd::where('id',$roomAd)->first();
or the better way is to use findOrFail()
$showRoom = RoomAd::findOrFail($roomAd);
hope this will solve your problem.
Related
I am trying to show subfolders and files (eg docx, pdf, png) in οther parent folders but I am getting this error "Trying to get property 'id' of non-object".
This is my route:
Route::get('folders-materials/{url}', [App\Http\Controllers\TeamsController::class, 'folderMaterialAdminUrl']);
This is my controller:
public function folderMaterialAdminUrl(Request $request, $url=null) {
$teams = Team::where('url', $url)->first();
$folders = Folder::where('url', $url)->first();
$subfolders = Subfolder::where('folder_id', $folders->id)->where('user_team',$teams->id)->orderBy('id', 'asc')->get();
$files = File::where('folder_upload', $folders->id)->orderBy('created_at', 'DESC')->get();
return view('adminsubfolderurl')->with(compact('teams','folders','subfolders','files'));
}
and this is my blade:
#foreach ($subfolders as $subfolder_admin)
<div class="col-xl-3 col-lg-4 col-md-4 col-sm-6 pt-5">
<a href="{{ url('subfolders/'.$subfolder_admin->url) }}" class="folder-link">
<i class="fas fa-folder d-flex justify-content-center m-auto"></i>
<div class="user-inf pt-4 text-center">
<h3>{{ $subfolder_admin->name }}</h3>
</div>
</a>
</div>
#endforeach
#foreach ($files as $file_admin)
<div class="col-xl-3 col-lg-4 col-md-4 col-sm-6 pt-5 file-col">
<a href="/{{ $file_admin->file }}" target="_blank" class="file-link">
<i class="far fa-image d-flex justify-content-center m-auto"></i>
<div class="user-inf pt-4 text-center">
<h3>{{ $file_admin->name }}</h3>
<p>{{ $file_admin->created_at }}</p>
</div>
</a>
</div>
#endforeach
Can anyone help please?
When you bind data through url and can be optional you have to use the '?' symbol, otherwise $url = null always is null
Route::get('folders-materials/{url?}', [App\Http\Controllers\TeamsController::class, 'folderMaterialAdminUrl']);
https://laravel.com/docs/8.x/routing#parameters-optional-parameters
Like I see, you don't need to assign null value to $url binded parameter if you use it for retrieve from db. Just
public function folderMaterialAdminUrl(Request $request, $url) {
$teams = Team::where('url', $url)->first();
why i am getting this error Duplicate keys detected.in my list every element have Unique ID.and i am using Key also thanks.
My Component is
Vue.component('list-topic',
{
props: ['topic'],
template: "#topicTemplate"
});
and my template is
<script id="topicTemplate" type="text/html">
<div class="row" style="border-bottom: 1px solid #ccc;">
<div class="col-sm-6">
<span class="vc"><i class="material-icons">swap_vert</i> {{topic.typeName}}</span>
</div>
<div class="col-sm-2">
<span class="vc">{{topic.type}}</span>
</div>
<div class="col-sm-2">
<i v-if="topic.Visible==true" class="vc material-icons icon-success">done</i>
<i v-if="topic.Visible==false" class="vc material-icons icon-danger">close</i>
</div>
<div class="col-sm-2">
<span :data-typeOrder="topic.typeOrder" :data-type="topic.type" :data-typeID="topic.typeID" onclick="TopicDeleteDom(this)" class="btn btn-link btn-danger btn-just-icon remove">
<i class="material-icons">close</i>
</span>
</div>
</div>
And rendering like this
<div id="topicAddSortable">
<list-topic v-for="topic in List" v-bind:topic="topic" key="topic.ID"></list-topic>
</div>
and Data id is
ID:1
ID:2
ID:3
ID:5
ID:8
You are not dynamically binding(v-bind) the key attribute.
You are setting the key using key="topic.ID", so it is resolved as a normal string topic.Id.
So change it to v-bind:key="topic.ID"
I'm loading default listing using vuejs. When I browse page it show me following error
[Vue warn]: Error compiling template:
My html template is as bellow:
<template id="results-template">
<div class="results-wrap col-lg-8 col-md-8 ">
<h3>Results:</h3>
<div v-for="category in books" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 pl-0">
<div class="single-vertical-book box">
<div class="book mt-20 text-center">
<img v-bind:src="{{category.URL}}" />
<div class="book-title-latest">
{{category.Title}}
</div>
<div class="book-author-lastest">
<a href="#" v-if="(category.Category == result.id)" v-for="(result,key) in genres" v-bind:key="result.id">
{{result.name}}
</a>
</div>
</div>
</div>
</div>
</div>
</template>
I'm using API to get data. When I inspected API response it's showing me response correctly but vuejs is not showing data in template. My VueJs code is as bellow:
Vue.component('Results',{
template : '#results-template',
props: ['books','genres']
})
and VueJs method is as bellow:
getBooks : function(){
var vm = this;
return $.get('apis.php?gtype=Books')
.done(function(d){
vm.books = JSON.parse(d);
});
}
My created on loading page code is as bellow:
created : function(){
var vm = this;
this.getBooks().done(function(){
........
});
}
Code for data :
data : {
books : []
}
Please help me what's wrong I'm doing?
Your are binding image incorrect way first of all make it correct. Replace your code:
<template id="results-template">
<div class="results-wrap col-lg-8 col-md-8 ">
<h3>Results:</h3>
<div v-for="category in books" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 pl-0">
<div class="single-vertical-book box">
<div class="book mt-20 text-center">
<img :src="category.URL" />
<div class="book-title-latest">
{{category.Title}}
</div>
<div class="book-author-lastest">
<a href="#" v-if="(category.Category == result.id)" v-for="(result,key) in genres" v-bind:key="result.id">
{{result.name}}
</a>
</div>
</div>
</div>
</div>
</div>
</template>
with this code:
<template id="results-template">
<div class="results-wrap col-lg-8 col-md-8 ">
<h3>Results:</h3>
<div v-for="category in books" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 pl-0">
<div class="single-vertical-book box">
<div class="book mt-20 text-center">
<img v-bind:src="{{category.URL}}" />
<div class="book-title-latest">
{{category.Title}}
</div>
<div class="book-author-lastest">
<a href="#" v-if="(category.Category == result.id)" v-for="(result,key) in genres" v-bind:key="result.id">
{{result.name}}
</a>
</div>
</div>
</div>
</div>
</div>
</template>
You've to use :src="category.URL" for image src binding not :src="{{category.URL}}"
Secondly in template call you are using "genres" have you initialized genres array or not? this may also cause for error. 1st check both of causes if problem not solved the check further.
Problem is that both divs shows on load. I tried to use v-cloak only on one but its not working. If i put on parent div then its not look good while is hidden. Any suggestion how can i display only one div while page is loading, but without v-cloak?
<div class="center_image" v-if="avatarImageSet">
<div class="checked">
<div class="seller_image {{ in_role('BusinessUsers') ? 'agency' : '' }}">
<img src="{{ home_asset('img/very_big_user_icon.png') }}" alt="" />
</div>
<div class="check_profile business">
<i class="fa fa-check"></i>
</div>
</div>
</div>
<div class="center_image" v-else>
<div class="checked">
<div class="seller_image">
<img v-bind:src="user_credentials.avatar" alt="Avatar"/>
</div>
<div class="check_profile business">
<i class="fa fa-check"></i>
</div>
</div>
</div>
This might be happening because of other errors in your code, like:
<img src="{{ home_asset('img/very_big_user_icon.png') }}" alt="" />, you should use v-bind with src
class="seller_image {{ in_role('BusinessUsers') ? 'agency' : '' }}" You should be using dynamic class binding here.
See modified code:
<div class="center_image" v-if="avatarImageSet">
<div class="checked">
<div class="seller_image" :class="{`yourclass`: in_role('BusinessUsers') === 'agency'}">
<img :src="home_asset('img/very_big_user_icon.png')" alt="" />
</div>
<div class="check_profile business">
<i class="fa fa-check"></i>
</div>
</div>
</div>
<div class="center_image" v-else>
<div class="checked">
<div class="seller_image">
<img v-bind:src="user_credentials.avatar" alt="Avatar"/>
</div>
<div class="check_profile business">
<i class="fa fa-check"></i>
</div>
</div>
</div>
I am having a weird issue with responsiveness in my angular app. On one of my pages I have use the md-card and md-list directives inside a div with class col-xs-12:
<div class="col-xs-12 col-sm-12 col-md-12">
<md-card>
<md-card-header>
<md-card-avatar>
<i class="material-icons md-36"></i>
</md-card-avatar>
<md-card-header-text>
<div class="page-title-wrapper pull-left">
<h4 class="page-title">Quizzes</h4>
<div class="page-title-border"></div>
</div>
</md-card-header-text>
</md-card-header>
</md-card>
</div>
<div ng-repeat="quiz in vm.quizzes" class="col-xs-12 col-sm-6 col-md-4">
<md-card>
<md-card-header>
<md-card-avatar>
<i class="material-icons md-36" ng-bind-html="quiz.course.icon_font"></i>
</md-card-avatar>
<md-card-header-text>
<span class="md-title">{{ quiz.course.name }}</span>
<span class="md-subhead">{{ quiz.name }}</span>
</md-card-header-text>
</md-card-header>
<img ng-src="{{ quiz.course.banner_url }}" class="md-card-image" alt="Fundamentals of Networking">
<md-card-content>
<p>
{{ quiz.overview.substr(0, 100) }}{{ (quiz.overview.length > 100 ? '...' : '') }}
</p>
<div class="md-10 pull-left text-meta">
{{ quiz.start_date }} {{ quiz.start_time }}
</div>
<div class="md-10 pull-right text-meta">
{{ quiz.duration }}
</div>
<br>
<hr>
<div class="clearfix"></div>
<md-button class="md-raised md-primary md-12 md-btn pull-right">
<i class="material-icons md-14 pull-left margin-top-10"></i>
<span class="md-text pull-left">
Start Quiz
</span>
</md-button>
</md-card-content>
</md-card>
</div>
Now for some reason when the screen is resized the content is displaced, the container does not resize with the screen so most of the content is hidden by the body. It only displays properly after the page has been reloaded after a screen resize.
So currently as a fix I have put this in my code to refresh or reload the page each time the screen resizes:
/* Reload APP on screen resize */
$(window).bind('resize', function(e)
{
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function()
{
this.location.reload(false); /* false to get page from cache */
}, 100);
});
However I am not satisfied with the screen reloading like this so I would like to know why this is happening and how I can fix it.