I have a route in Laravel that requires an id as a parameter.
Route::get('/example/{id}', ExampleController#index)
If I had passed the data from the Laravel controller to the view value I would pass it like this:
Click
But my id is a vue value:
<tr v-for="item in items">
<td>#{{ item.id }}</td>
<td>#{{ item.name }}</td>
<td>#{{ item.number }}</td>
<td>#{{ item.address}}</td>
<td v-if="item.status==0">Click</td>
</tr>
Which is the correct way to do this?
You can just use v-bind for this, like following:
<a :href="'/example/' + item.id" class="button success">Click</a>
Related
I have a table is populated with some info and I would like to format the table like the picture
Unfortunately the excel sheet which I have no control over is formatted so:
I want any row that has only a Equipment type to span whole row. All other rows should appear as normal table row.
I am using following vue template:
<table>
<caption>
SHS Scrap Table
</caption>
<thead>
<tr>
<th>Make</th>
<th>Model #</th>
<th>Bar Code</th>
<th>Serial #</th>
<th>Location</th>
<th>Condition</th>
</tr>
</thead>
<tbody v-for="item in scrapDataEmptyRowsRemoved" :key="item">
<tr v-if="item['Equipment Type']">
<td class="equipt-type" colspan="6">
Equipment Type - {{ item["Equipment Type"] }}
</td>
</tr>
<tr v-else>
<td>{{ item["Make"] }}</td>
<td>{{ item["Model #"] }}</td>
<td>{{ item["Bar Code"] }}</td>
<td>{{ item["Serial #"] }}</td>
<td>{{ item["Location"] }}</td>
<td>{{ item["Condition"] }}</td>
</tr>
</tbody>
</table>
The only problem is that looking in Devtools I see that every row has a Tbody which is not semantically correct. Any idea's on how to correct this. If I use a container around the v-if v-else all formatting breaks down.Thanks...
Update the only problem is Vite is objecting to moving :key attribute to the v-else:
I dont what other unique key they want.
Update II - Ok apparently if I use different object keys Vite is ok with that ie :key="item['Equipment Type'] and on v-else :key="item['Make']. Does that seem correct?
You can move the v-for in a template tag, that won't be rendered in the DOM.
<tbody>
<template v-for="item in scrapDataEmptyRowsRemoved" :key="item">
<tr v-if="item['Equipment Type']">
<td class="equipt-type" colspan="6">
Equipment Type - {{ item["Equipment Type"] }}
</td>
</tr>
<tr v-else>
<td>{{ item["Make"] }}</td>
<td>{{ item["Model #"] }}</td>
<td>{{ item["Bar Code"] }}</td>
<td>{{ item["Serial #"] }}</td>
<td>{{ item["Location"] }}</td>
<td>{{ item["Condition"] }}</td>
</tr>
</template>
</tbody>
Model 1: Walks
return $this->belongsTo('App\Models\Device','device_uuid','device_uuid');
}
Model 2: Device
public function walks() {
return $this->hasMany('App\Models\Walks','device_uuid','device_uuid');
}
In my index file:
<table class="table table-bordered">
<tr>
<th>No</th>
<th>Walk Date</th>
<th>Device Name</th>
<th>In</th>
<th>Out</th>
<th width="280px">Action</th>
</tr>
#foreach ($walks as $walk)
<tr>
<td>{{ ++$i }}</td>
<td>{{ $walk->walk_datetime }}</td>
<td>{{ $walk->device->device_uuid }}</td> <========
<td>{{ $walk->walk_in }}</td>
<td>{{ $walk->walk_out }}</td>
<td>
<form action="{{ route('walks.destroy',$walk->id) }}" method="POST">
<a class="btn btn-primary" href="{{ route('walks.edit',$walk->id) }}">Edit</a>
#csrf
#method('DELETE')
<button type="submit" class="btn btn-danger">Delete</button>
</form>
</td>
</tr>
#endforeach
</table>
this causes errors:
<td>{{ $walk->device->device_uuid }}</td> <========
"Trying to get property 'device_uuid' of non-object"
If I do this:
<td>{{ $walk->device }}</td>
I get:
{"id":1,"device_uuid":"1902101300368","device_name":"Test 1","created_at":null,"updated_at":null}
which means the relation works correct.
Is there any other way that I should use to access the "device_mame" attribute?
Related to questions below.. All walks has a valid device linked.
walks list. This is what shows if I print -> $walk->device
walk list (DB)
devices list (DB)
:) It seems to me that some Walks don't have a Device. That's why it (usually) throws that error.
Similar problem on Laracasts.
Or what you can do is use ternary operators
<td>{{(isset($walk->device->device_uuid)? $walk->device->device_uuid : ''}}</td>
I'm Just Trying To Do Something using Vue Similar To forelse in laravel framework blade,
This Is Just To Do a Test To Confirm If Table Has Records Or Not, If No, It Allows Me To Add A Default Value Like :
<tr>
<td colspan="4">There's No Records Yet</td>
</tr>
I Tried This But It Gives Me [vue/no-use-v-if-with-v-for]
<tr v-for="(category, index) in this.categories" :key="index" v-if="categories">
<td>{{ category.id }}</td>
<td>{{ category.name }}</td>
<td style="width: 20%;">
<img :src="`${$store.state.baseUrl}/storage/${category.image}`" style="width: 100%;" :alt="category.name">
</td>
<td>
<button type="button" class="btn btn-danger" #click="deleteCategory(category)"><i class="fa fa-trash"></i></button>
<i class="fa fa-edit"></i>
</td>
</tr>
<tr v-else>
<th colspan="4" class="text-center">There's No Reacoards Yet</th>
</tr>
Is There Anyone Has A Solution For This Issue,
Thank You
- Muhammed Elfeqy
This is one of the times where you want to use the invisible <template> element
For example
<template v-if="categories.length > 0">
<tr v-for="category in categories" :key="category.id">
<!-- and so on -->
</tr>
</template>
<tr v-else>
<td colspan="4">There's No Records Yet</td>
</tr>
I'm close to where I need to go but not close enough. This is my code
<td>
<a href="https://www.ncbi.nlm.nih.gov/pubmed/"
{{item.pmid}} target="_blank">{{ item.pmid }}</a>
</td>
<td>{{ item.year }}</td>
<td>{{ item.title }}</td>
<td>{{ item.authors }}</td>
<td>{{ item.article }}</td>
<td>{{ item.journal }}</td>
<td>{{ item.rcr }}</td>
<td class="text-xs-right">{{ item.percentile }}</td>
If I take out the href {{item.pmid}} it will go to the web page in a new window. However I need to add the item.pmid value to the end of the href string so it will go to an exact page. If I leave it the way it is now I get an error saying 'Element': '{{' is not a valid attribute name. Is there someway that I can get the value concatenated to the string?
OK-- I've found this:
How to put variable in a href on the vue js 2?
But still not sure about how to us v-bind
The best way to do this, if anyone is still wondering, is to use dynamic rows
They work like this:
<v-data-table
:headers="tableHeaders"
:items="tableItems"
>
<template v-slot:item.link="{ item }">
<a :href="item.link">Link</a>
</template>
</v-data-table>
got it--
<td>
<a
:href="'https://www.ncbi.nlm.nih.gov/pubmed/' + item.pmid"
target="_blank"
>{{ item.pmid }}</a>
</td>
I am trying to get the current index of an array when using v-for like so:
<tr v-for="(item,index) in timetable">
Index: #{{index}}
<td>#{{ item.subject }}</td>
<div v-if="index == timetable.length - 1">
<td>#{{ item.lesson_end }}</td>
</div>
<div v-else>
<td>#{{ item.lesson_start }}</td>
</div>
</tr>
But I only get the error message:
[Vue warn]: Property or method "index" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
Why does it claim that index is not defined, according the docs this should be valid?
The problem is solely due to your invalid HTML structure. Vue's render function is not able to interpolate the result correctly and thus, you get that error.
Try something like
<tr v-for="(item,index) in timetable">
<td>Index: #{{ index }}</td>
<td>#{{ item.subject }}</td>
<td v-if="index == timetable.length - 1">#{{ item.lesson_end }}</td>
<td v-else>#{{ item.lesson_start }}</td>
</tr>
http://jsfiddle.net/Lrvdjxpq/