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>
Related
am trying to retrieve data from the controller and send it through and email to student but it not working .i have tried it but it not going
public function test(){
$welcome = DB::table('results')
->select('studentinfos_id','marks','subject_code','name','email','rollid','classname','classnumber','image_path')
->join('studentinfos','studentinfos.id','=','results.studentinfos_id')
->join('subjects','subjects.id','=','results.subjects_id')
->join('addclasses','addclasses.id','=','results.addclasses_id')
->where('studentinfos.id',1)
->orderBy('subject_code','ASC')
->get();
Mail::to('serge#gmaile','divine')->cc('leade#gmail')->send(new mytestmail($welcome));
echo 'check ur inbox';
}
how do i get all the result from the $welcome in my view.blade.php
i was hopping that i will send and email that contains student info and result of there marks and subject through email
<div class="container">
<div class="text-center">
<h1> Result for {{ $classname }} student </h1>
</div>
<div class="border bg-white seespace p-3">
<div class="row">
<div class="col-md-8">
<table class="table table-borderless">
<tr>
<th>CLASS</th>
<td>{{ $welcome->classname }} {{ $welcome->classnumber }}</td>
</tr>
<tr>
<th>FULL NAME</th>
<td>: {{ $welcome->name }}</td>
</tr>
<tr>
<th>EMAIL</th>
<td>: {{ $welcome->email }}</td>
</tr>
<tr>
<th>ENROLLMENT</th>
<td>: {{ $welcome->enrollment }}</td>
</tr>
</table>
</div>
<div class="col-md-4">
<img class=" imgreport center" src="{{ asset('images/' . $welcome->image) }}"
alt="Card image cap">
</div>
</div>
<nav class="bg-dark text-white-50 mb-5">
<div class="container">
<div class="row p-3">
</div>
</div>
</nav>
<table class="table text-center table-bordered table-responsive py-3">
<thead class="thead-info text-center">
<tr>
<th>no</th>
<th>subject</th>
<th>marks</th>
</tr>
</thead>
<tbody>
<?php $num=1;
$total = 0;
$name;
?>
#foreach($welcome as $see)
<tr>
<td>{{ $num++ }}</td>
<td>{{ $see->subject_code }}</td>
<td>{{ $see->marks }}</td>
</tr>
<?php
$total += $see->marks ?>
#endforeach
<tr>
<td></td>
<td >total marks</td>
<td>{{ $total }}</td>
</tr>
<tr>
<td></td>
<td>Download</td>
<td>
<form action="/print" method="get">
<input type="hidden" value="{{$studnet}}" name='id' >
<button class="btn btn-info">Download</button>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
#stop
you have to pass the welcome variable to your view.
In the controller method add the data when displaying your view:
return view('view', ['welcome' => $welcome]);
https://laravel.com/docs/8.x/views#passing-data-to-views
I have a search built in VueJS and the results of the search are displayed in a separate component. I want to display the data in a table with the table headings. The issue I'm having is that the table heading appears before each row. How do I get it to appear once? Im sure this is easy but I cant think how to do this. Im fairly new to Vue, so any help appreciated.
<table class="table table-hover" id="simpleTable">
<thead>
<tr>
<th
v-on:click="sortTable(title)"
:key="title"
scope="col"
class="col-md-3"
>
Course
</th>
<div
class="arcoursedata"
v-if="title == sorttitle"
v-bind:class="ascending ? 'arcoursedata_up' : 'arcoursedata_down'"
></div>
<th scope="col">Award</th>
<th scope="col">Level</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-3">
{{ title }}
</td>
<td>
{{ award }}
</td>
<td class="col-md-3">
{{ level }}
</td>
<td class="col-md-3">
<a
:href="result.displayUrl"
class="btn-sm btn-primary"
role="button"
>
<span class="sr-only">Read more about {{ title }}</span> Read
more</a
>
</td>
</tr>
</tbody>
</table>
You need to separate row from tbody to component. And do v-for only on this component and not on the entire table.
It will be look like:
<table class="table table-hover" id="simpleTable">
<thead>
<tr>
<th
v-on:click="sortTable(title)"
:key="title"
scope="col"
class="col-md-3"
>
Course
</th>
<div
class="arcoursedata"
v-if="title == sorttitle"
v-bind:class="ascending ? 'arcoursedata_up' : 'arcoursedata_down'"
></div>
<th scope="col">Award</th>
<th scope="col">Level</th>
</tr>
</thead>
<tbody>
<rowComponent v-for="rowData in tableData" :row="rowData"></rowComponent>
</tbody>
</table>
And RowComponent will look like:
<td class="col-md-3">
{{ row.title }}
</td>
<td>
{{ row.award }}
</td>
<td class="col-md-3">
{{ row.level }}
</td>
<td class="col-md-3">
<a :href="row.displayUrl"
class="btn-sm btn-primary"
role="button">
<span class="sr-only">Read more about {{ row.title }}</span> Read
more</a>
</td>
<script>
export default {
name: "rowComponent",
props: ['row']
}
</script>
I have a table where in each TR when I click it redirects me to another view with the detail, the idea is that I have never worked with Vue and I can't think how to disable the event when I click on the first TD tag of the table.
Before in Jquery I did it this way:
//Add onclick to TR
$('table tr').click(function(e) {
// Avoid redirecting if it's a delete button
if(!$(e.currentTarget).hasClass('delete')) {
// Not a button, redirect by taking the attribute from data-route
window.location.href = $(e.currentTarget).data('route');
}
});
But with Vue I don't know how to do it in the onclick event.
This is my table and the method
<table
id="accounts-table"
class="
table table-listbox
table-bordered_
table-responsive-md
table-striped_
text-center_
"
>
<thead>
</thead>
<tbody>
<tr v-if="tableData.length === 0">
<td colspan="4" class="text-center">
No hay oportunidades para mostrar.
</td>
</tr>
<template v-if="loading === true">
<tr colspan="9" class="text-center">
<b-spinner variant="primary" label="Spinning"></b-spinner>
<b-spinner variant="primary" type="grow" label="Spinning"></b-spinner>
</tr>
</template>
<template v-else>
<tr
v-for="(data, k) in tableData"
:key="k"
#click="viewOpportunity(k, data)"
>
<slot :row="data">
<td v-if="permissions.includes('view all opportunities')" width="10">
<div class="iq-email-sender-info">
<div class="iq-checkbox-mail">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="mailk">
<label class="custom-control-label" for="mailk"></label>
</div>
</div>
</div>
</td>
<td width="20">
<vue-avatar
:username="data.sales_man"
:title="data.sales_man"
:size="32"
v-if="data.sales_man != ''"
></vue-avatar>
</td>
<td width="5">
<template v-if="data.has_file != false">
<i
class="ri-attachment-line"
style="font-size: 20px; color: #007bff"
></i>
</template>
</td>
<td width="120" nowrap>
<template>
<p class="mb-0">{{ data.created_at }}</p>
<small class="text-info mt-5">
Fecha creación
</small>
</template>
</td>
</slot>
</tr>
</template>
</tbody>
</table>
viewOpportunity(data) {
window.location.href = "/opportunity/" + data.id;
},
For example in the first TD of the table I would like that it does not redirect me to the page but from the 2nd TD it redirects me.
On first td element use this even modifier - #click.stop
Prevent on click on parent when clicking button inside div
This kind of issue ever answered .. please have a look on this
If someone needs an href inside a table that has a that has a #click method in the row, but you wat to the link does not fire the click event in the row and also to prevent event propagation when there is no method to call, e.g. a simple <a href="mailto:someone#example.org"> link, try to use this trick with #click.self:
BEFORE
<table>
<tr>
<th>COLUMN A</th>
<th>COLUMN B</th>
</tr>
<tr #click="myMethodFromRow">
<td>Some Value</td>
<td>
<a target="_blank" :href="mailto:someone#example.org"> My link </a>
</td>
</tr>
</table>
AFTER
<table>
<tr>
<th>COLUMN A</th>
<th>COLUMN B</th>
</tr>
<tr>
<td #click="myMethodFromRow">Some Value</td>
<td #click.self="myMethodFromRow">
<a target="_blank" :href="mailto:someone#example.org"> My link </a>
</td>
</tr>
</table>
In this case I wanted to execute myMethodFromRow clicking inside each td, but not clicking the link. So I changed the myMethodFromRow method from the tr and put it into each td. But the most important trik was to use #click.self for the td with the href link.
.self only trigger handler if event.target is the element itself, i.e. not from a child element.
DOCUMENTATION: https://vuejs.org/guide/essentials/event-handling.html#event-modifiers
I don't know how to add dynamic content in my Vue js 2 app. I'd like to add many div elements after clicking on a button. THis div should have input and after clicking on a Save button all input texts inside dynamically created divs should be sent to backend (so I use model inside my template).
<div v-if="!this.spinnerVisibleForCorrectiveActions">
<div>
<table class="p-2 table-cell">
<tr class="font-weight-bold">
<td class="vue-good-table-col-200">
<div class="mt-2 criterion">
ID
</div>
</td>
<td class="vue-good-table-col-200">
<div class="mt-2 criterion">
DZIAŁANIE
</div>
</td>
<td class="vue-good-table-col-200">
<div class="mt-2">
SZCZEGÓŁY
</div>
</td>
</tr>
<tr v-for="(actions,index) in correctiveActions" :key="index">
<td class="vue-good-table-col-200">
<span> {{actions.orderNumber}}</span>
</td>
<td class="vue-good-table-col-200">
<span> {{actions.action}}</span>
</td>
<td class="vue-good-table-col-200">
<span> {{actions.recommendations}}</span>
</td>
</tr>
</table>
<button class="addAction p-3 mb-2 bg-secondary text-white w-100 bg-info btn btn-success">NAdd new action</button>
<br>
</div>
How to add dynamically (multiple times) something like this and additionally to have the possibility to get all data from my dynamically created inputs after clicking on a button:
<tr v-for="(actions,index) in correctiveActions" :key="index">
<td class="vue-good-table-col-200">
<span> {{actions.orderNumber}}</span>
</td>
<td class="vue-good-table-col-200">
<span> {{actions.action}}</span>
</td>
<td class="vue-good-table-col-200">
<span> {{actions.recommendations}}</span>
</td>
</tr>
Ok, the answer in my case is very simple - I have to only add an empty object to my correctiveActions array:
<button class="addAction p-2 mb-2 bg-secondary text-white w-100 bg-info btn btn-success" #click="addNewAction">Nowe
działanie
</button>
and next:
methods:{
addNewAction() {
this.correctiveActions.push
({
id: undefined,
incidentId: this.incidentId,
orderNumber: this.getNextOrderNumber(),
action: undefined,
recommendations: undefined
});
},
}
Name Mobile No Introducer Created On Status Action
Adill 6666655555 Nitesh 05-02-2014 Pending For Approval [button]
Adill 6666644444 Nitesh 05-02-2014 Pending For Approval [button]
the situation is like this, I want to click on buttons by checking their unique mobile no.
let suppose I want to click on button2 where mobile number is 666644444. So How can I perform this thing ?
enter code here :
<tr class="even">
<td class="">Adil Imroz</td>
<td class="">999933333</td>
<td class="">Adil</td>
<td class=" sorting_1">04-02-2014</td>
<td class="">
<span class="undefined">Pending For Approval</span>
</td>
<td class="">
<a id="editCustomerDetails" class="btn btn-info btn-small" onclick="showUpdateForm(2);">
<i class="halflings-icon edit halflings-icon"/>
</a>
</td>
</tr>
<tr class="odd">
<td class="">Adil Imroz</td>
<td class="">9999444444</td>
<td class="">Adil</td>
<td class=" sorting_1">04-02-2014</td>
<td class="">
<span class="undefined">Pending For Approval</span>
</td>
<td class="">
<a id="editCustomerDetails" class="btn btn-info btn-small" onclick="showUpdateForm(3);">
</td>