The object name has space like 'Apple Juice','Orange Juice', so how can I use it in v-for?
<div id="box" v-if="!loading">
<table>
<thead>
<tr>
<th>Name</th>
<th>Total Sales</th>
</tr>
</thead>
<tbody>
<tr v-for="name in Beverage" v-bind:key="name">
<td>{{name.Txn Group}}</td> //error
<td>{{name.TotalSales}}</td>
</tr>
</tbody>
</table>
</div>
I called API and get JSON data, so I unable to change the object name.
Thanks.
You can write it like {{ name['Txn Group'] }} and it will work properly.
Related
I want create a one <table> where multiple custom elements can have multiple <tr> components.
I tried using containerless, but element get rendered outside of <table>.
<table>
<thead>
<tr>
<th>Position</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<order-line repeat.for="line of lines" line.to-view="line" containerless></order-line>
</tbody>
</table>
And custom element looks like
<template>
<tr>
<td>${line.position}</td>
<td>${line.name}</td>
</tr>
<tr if.to-view="detailsVisible">
<td colspan="2">${line.complicatedDescription}</td>
</tr>
</template>
How I can get a table row with details as another <tr> element within one aurelia CustomElement?
This is a limitation of the html spec. A <table> element cannot contain elements other than <tbody>, <tr>, etc.
You can use as-element to overcome this limitation:
<tr as-element="order-line" repeat.for="line of lines" line.to-view="line" containerless></tr>
This tells the template compiler that this <tr> is in fact an order-line custom element and to process it as such. At the same time, it "fools" the browser into thinking that this is just an ordinary <tr>
<table> can contain multiple <tbody> elements, this will allow to wrap multiple <tr> elements inside custom element with <tbody>.
/* custom element */
<template>
<tbody>
<tr>
<td>${line.position}</td>
<td>${line.name}</td>
</tr>
<tr if.to-view="detailsVisible">
<td colspan="2">${line.complicatedDescription}</td>
</tr>
</tbody>
</template>
Use as custom element inside
<table>
<thead>
<tr>
<th>Position</th>
<th>Name</th>
</tr>
</thead>
<order-line repeat.for="line of lines" line.to-view="line"></order-line>
</table>
I'm trying to create a vue component to all my datagrids, I'm using DataTables library (https://datatables.net/), so, i've already create my vue component:
GridDatos.vue
<template>
<div class="container">
<h4>{{titulo}}</h4>
<table id="example" class="table table-striped table-bordered nowrap" style="width:100%">
<thead>
<tr>
<th v-for="col in colNames">{{col}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>sssss</td>
<td>sssss</td>
<td>sssss</td>
<td>sssss</td>
<td>sssss</td>
<td>sssss</td>
</tr>
</tbody>
<tfoot>
<tr>
<th v-for="col in colNames">{{col}}</th>
</tr>
</tfoot>
</table>
</div>
The instance:
Vue.component('grid-datos', require('./components/GridDatos.vue').default);
And the usage:
<div id="app">
<grid-datos
url="/api/listadoContactos"
titulo="Mis Datos"
:col-names="('Name','Position','Office','Age','Start date','Salary')">
</grid-datos>
</div>
But the problem here is the table header, it seems to use the last array element as you can see in the screenshot:
Titles
Definitely i'm not setting the array correctly when call the component.
Could anybody help me?
Thanks a lot. Regards.
I have a table where i show people's some properties. As these properties can be extended in the future, i need to show all the available properties in table head, and the related answers to those properties under table body
I can reach the people's properties with the syntax:
v-for='person in people' and {{people.name}}
But i need to dynamically write 'Name' to table head.
Is there any option to reach to the object properties like name, age, salary, country, etc. ?
ex: people={name:john, surname: black, age:35, country:german}
<table class="table table-filter">
<thead>
<tr>
<th>Key</th>
<th>Name</th>
<th>Age</th>
<th>Whatever</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value</td>
<td>John</td>
<td>35</td>
<td>Green</td>
</tr>
<tr>
<td>Value</td>
<td>Selin</td>
<td>23</td>
<td>Black</td>
</tr>
</tbody>
As with v-for directive you can cycle not only arrays, but objects also, just use second, nested v-for directive. Generic example:
<thead>
<tr>
<th v-for="val, key in person[0]"> // with first object in array
{{ key }} // show key - name for each column
</th>
</tr>
</thead>
<tbody>
<tr v-for="person, idx in people" :key="idx"> // with whole array
<td v-for="val, key in person"> // with each object in array
{{ val }} // show value for each column
</td>
</tr>
</tbody>
Accordibg to your sample data people={name:john, surname: black, age:35, country:german}
Key value in horizontal Table
<table>
<tr>
<th v-for="(value, index) in people">
{{ index }}
</th>
</tr>
<tr>
<td v-for="(value, index) in people">
{{ value }}
</td>
</tr>
<table>
Key value in vertical Table
<table>
<tr v-for="(value, index) in people">
<th>
{{ index }}
</th>
<td>
{{ value }}
</td>
</tr>
<table>
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.
I'm using Angular-datatables and when I define the table using the angular renderer I can see nice arrows for sorting column.
<table class="dataTable row-border hover" datatable="ng" dt options="vm.dtOptions">
<thead>
<tr>
<th class="secondary-text">
<div class="table-header">
<span class="column-title">My header</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ex in ::vm.exes">
<td>{{ex.myValue}}</td>
</tr>
</tbody>
</table>
When I define the columns with DTColumnBuilder.newColumn the arrows are missing (sorting works).
<table datatable="" dt-options="vm.dtOptions" dt-columns="vm.dtColumns"
class="dataTable row-border hover"
dt-disable-deep-watchers="true"
dt-instance="vm.dtInstanceCallback">
</table>
and
vm.dtColumns = [
DTColumnBuilder.newColumn('myValue').withTitle('My header'),
Can I bring the sorting arrows back?