I have a table where each "logical" row contains of two "markup rows".
<table class="table table-bordered">
<tbody>
<template v-for="(note, index) in notes">
<tr>
<td>
{{ moment(note.noteTime).format('YYYY-MM-DD HH:mm') }}
</td>
<td>
{{ note.locationName }}
</td>
</tr>
<tr>
<td colspan="2">
{{ note.noteText }}
</td>
</tr>
</template>
</tbody>
</table>
Is there a way generate this kind of table in vue without hurting html syntax (template element is not valid inside tbody)?
<template> does not generate a html element and thus will not interfere with html syntax.
There is actually a similar example inside the VueJS docs:
https://v2.vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider" role="presentation"></li>
</template>
</ul>
Here is a jsFiddle to see the example from the docs in action. You can inspect the HTML syntax:
https://jsfiddle.net/50wL7mdz/545901/
Related
When trying to fill a table with rows using v-for it is quite easy to map the v-for elements 1:1 with the rows like:
<template>
<table>
<tr v-for="item in items"><td>{{item}}</td></tr>
</table>
</template>
My question is: how can I create multiple rows (eg td elements) per item (see following pseudocode):
<template>
<table>
<nothing v-for="item in items">
<tr><td>{{item.line1}}</td></tr>
<tr><td>{{item.line2}}</td></tr>
</nothing>
</table>
</template>
Here <nothing> should not be emitted in the DOM as a level, only <td> directly under <table>.
Is this possible?
In Vue.js, you can use tag <template>, it does exactly what you meant by nothing.
<table id="t1">
<template v-for="item in items">
<tr><td>{{item.line1}}</td></tr>
<tr><td>{{item.line2}}</td></tr>
</template>
</table>
But alternatively, you can wrap these two lines into tbody tag to actually render it and group the lines in two, e.g., for styling.
In addition to Dmitry's solution, typically, you would want to loop your rows, and use blocks in the same td.
<table>
<tr v-for="item in items">
<td>
{{item.line1}} <br />
{{item.line2}}
</td>
</tr>
</table>
or
<table>
<tr v-for="item in items">
<td>
<div>{{item.line1}}</div>
<div>{{item.line2}}</div>
</td>
</tr>
</table>
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 am trying to iterate through the array props_nfl_days which is equal to ["Sunday", "Thursday Night", "Monday Night"] so it appears as a header for each group of NFL scores by day of the week. The component looks like:
Updated Code:
const nfl = {
nflComponent: Vue.component("tab-nfl", {
props: [
"props_league_data_nfl",
"props_nfl_days",
"props_league_standings"
],
template: `
<div class="vue-root-element">
<div class="container nfl-scores">
<div v-for="(dayDataArray, index) in props_league_data_nfl">
<p> {{ index }} </p>
<h2> {{ props_nfl_days[index] }} </h2>
<div class="row">
<div class="col-xs-12 col-md-4 col-lg-3" v-for="arrayItem in dayDataArray">
<table class="table table-striped table-sm">
<thead>
<th scope="col" class="box-score-status is-completed" v-if="arrayItem.isCompleted">Final</th>
</thead>
<tbody>
<tr>
<td class="box-score-team"> {{ arrayItem.game.awayTeam.Abbreviation }} </td>
<td class="box-score-inning" v-for="quarter_score in arrayItem.quarterSummary.quarter">
{{quarter_score.awayScore }}</span>
<td class="box-score-final" v-bind:class="{ won: arrayItem.awayScore > arrayItem.homeScore }">{{ arrayItem.awayScore }}
</td>
</tr>
<tr>
<td class="box-score-team"> {{ arrayItem.game.homeTeam.Abbreviation }} </td>
<td class="box-score-inning" v-for="quarter_score in arrayItem.quarterSummary.quarter">
{{quarter_score.homeScore }}
</td>
<td class="box-score-final" v-bind:class="{ won: arrayItem.homeScore > arrayItem.awayScore }">{{ arrayItem.homeScore
}}
</td>
</tr>
<tr><td class="box-score-team w-150">Location: {{ arrayItem.game.location }} </td></tr>
</tbody>
</table>
</div> <!-- End v-for dayDataArray -->
</div> <!-- End row -->
</div> <!-- End v-for props_league_data_nfl -->
</div> <!-- End container -->
All I get is index goes to 0 and thats it. props_league_data_nfl is an objectwith three properties. Here is a snapshot of the output of Vue panel :
What I want is the correct nfl_days array element in h2 header for each props_league_data_nfl group. See picture:
I would like these Sunday headers to be Thurday Night and Monday Night respectively. Any guidance on how to achieve this much appreciated.
Computed properties should not have side effects. Computed properties are cached based on their dependencies; since increment doesn't see any changes in its dependencies, it does not re-compute its value. So increment it will run once and always return the same value: 0.
v-for takes additional parameters for the key (in the case of iterating over objet properties) and the current index, so you can remove the increment computed property and re-write your template like so:
<div v-for="(dayDataArray, key, index) in props_league_data_nfl">
**<h2> {{ props_nfl_days[index] }} </h2>**
I am trying to add a collapse component from bootstrap-vue into a table I am creating (Not bootstrap-vue table as find it easier to use plain table)
Can anyone tell me why this works as expected (But obviously opens every collapse component with the same ID)
<td>
<fa icon="bars" v-b-toggle.collapse2/>
</td>
</tr>
<td colspan="4">
<b-collapse id="collapse2" >
<b-card>
<p class="card-text">Collapse contents Here</p>
</b-card>
</b-collapse>
</td>
But this doesn't work, I know i have a unique id in case.id
<td>
<fa icon="bars" v-b-toggle="'collapse-' + case.id" />
</td>
</tr>
<td colspan="4">
<b-collapse id="'collapse-' + case.id" >
<b-card>
<p class="card-text">Collapse contents Here</p>
</b-card>
</b-collapse>
</td>
Many Thanks
You are not setting up a proper attribute binding in id="'collapse-' + case.id". It works in v-b-toggle="'collapse-' + case.id" case because as stated in the docs
Directive attribute values are expected to be binding expressions
In case of attributes you should use one of the following:
mustache
<div id="item-{{ id }}"></div>
v-bind
<div v-bind:id="'item-' + id"></div>
shorthand :
<div :id="'item-' + id"></div>
I am trying to render a table. The data is dynamic and comes from an array. It works fine, except: the table content is rendered outside of the table on top of the page.
I would like it to render inside the table. Would anyone be able to help?
This what the code looks like:
Vue.js:
Vue.component('word', {
props: ['word-list'],
template: '#word-template'
});
new Vue({
el: '#root'
});
HTML:
<div id="root">
<word :word-list="{{json_encode($commonWords) }}"></word>
<template id="word-template">
<table class="table">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr v-for="(value, key) in wordList" :wordList="wordList">
<td> #{{ key }} </td>
<td> #{{ value }} </td>
</tr>
</tbody>
</table>
</template>
</div>
Note: This is used with Laravel, thats why there is an # before double curly braces.
You can't define the template for your component inside the template for your Vue. You need to move it outside.
<div id="root">
<word :word-list="{{json_encode($commonWords) }}"></word>
</div>
<template id="word-template">
<table class="table">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr v-for="(value, key) in wordList" :wordList="wordList">
<td> #{{ key }} </td>
<td> #{{ value }} </td>
</tr>
</tbody>
</table>
</template>
If you leave the template for the component inside the template for the root, the root will compile the template for the component as part of it's own template.