Looping data from an array. The problem is that the loop creates 3 empty tables, guessing it's because im calling item. 3 times. If I want the data from the array without Vue creating empty tables, how should I display the data? Been trying to use {{users.firstname}} without the v-for loop but doesn't seem to work.
<table v-for="item in users">
<tbody>
<tr>
<td>{{ item.username }}</td>
</tr>
<tr>
<td>{{ item.firstname }}</td>
</tr>
<tr>
<td>{{ item.lastname }}</td>
</tr>
</tbody>
</table>
Solved using <template v-for="item in users" v-if="item.username && item.firstname && item.lastname">. No extra elements are printed out.
If you want to create 3 rows per user, use a <template> tag to group them, and use v-for on that template:
<table>
<tbody>
<template v-for="item in users">
<tr>
<td>{{ item.username }}</td>
</tr>
<tr>
<td>{{ item.firstname }}</td>
</tr>
<tr>
<td>{{ item.lastname }}</td>
</tr>
</template>
</tbody>
</table>
Have a look at this fiddle for an example: https://jsfiddle.net/nfa43bhq/
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>
I have a datatable (vuetify 2.1.12) with slot="items" and slot="footer".
In the footer I wan't to display the sum of some of the columns.
The "problem" is that the columns in the footer are not at all in line with the columns in the table.
basically I do this in the data table:
<template v-slot:item="props">
<tr>
<td>{{ props.item.qty }}</td>
<td>{{ props.item.qtyBoughtToday }}</td>
<td>{{ props.item.shortName }}</td>
</tr>
</template>
<template slot="footer">
<tr>
<td></td>
<td>{{ sumQtyBoughtToday }}</td>
<td></td>
</tr>
</template>
The thing is that the footer column "sumQtyBoughtToday" does not end up in the same place at all as the column props.item.qtyBoughtToday.
So...how to accomplish it?
I think you're looking for the body.append slot instead of the footer...
<template slot="body.append">
<tr>
<td></td>
<td>{{ sumQtyBoughtToday }}</td>
<td></td>
</tr>
</template>
Example: https://codeply.com/p/kIlxX2jTZ1
I wish to create a search feature in my NG ZORRO table by linking/connect nz-input with nz-table. Is is possible to do so? Or is there any other methods to do so?
<uic-page>
<p>user-details works!</p>
<nz-input-group [nzSuffix]="suffixIconSearch">
<input type="text" nz-input placeholder="input search text" />
</nz-input-group>
<ng-template #suffixIconSearch>
<i nz-icon nzType="search"></i>
</ng-template>
<nz-table #basicTable [nzData]="listOfData">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of basicTable.data">
<td>{{ data.name }}</td>
<td>{{ data.age }}</td>
<td>{{ data.address }}</td>
<td>
<a>Action δΈ€ {{ data.name }}</a>
<nz-divider nzType="vertical"></nz-divider>
<a>Delete</a>
</td>
</tr>
</tbody>
</nz-table>
Thanks.
This should work fine
Just make an event on the input and change the data based on that
also make sure you make copy of the data (if the search is client-side) to avoid lose the data
JSON Data
{
"Data":[
{
"Country":"{\"CountryID\":1,\"Name\":\"United States\",\"Code\":\"US\"}",
"Currency":"{\"CountryID\":1,\"Code\":\"USD\",\"Symbol\":\"$\"}"
},
{
"Country":"{\"CountryID\":1,\"Name\":\"United States\",\"Code\":\"US\"}",
"Currency":"{\"CountryID\":1,\"Code\":\"USD\",\"Symbol\":\"$\"}"
}
]
}
Vue.js Code
<table class="table table-bordered mb-0" v-if="MembershipRecords.length > 0">
<thead>
<tr>
<th>Currency</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr v-for="Record in Records">
<td>{{ Record.Currency }}</td>
<td>{{ Record.Country }}</td>
</tr>
</tbody>
</table>
Below is how it looks on web page.
When I tried like this Record.Country.Name it displays nothing.
Can you please suggest?
It looks like you have stringified data in the records column. Try this:
<tr v-for="Record in records">
<td>{{ JSON.parse(Record.Currency).Code }}</td>
<td>{{ JSON.parse(Record.Country).Name }}</td>
</tr>
https://jsfiddle.net/01ogLreg/
I have a layout similar to this:
My parent component is this:
<!-- Parent -->
<table>
<thead>
<tr>
<th>ID</th>
<th>Some</th>
<th>Column</th>
<th>Names</th>
</tr>
</thead>
<tbody>
<tr v-for="thing in things">
<td>{{ thing.id }}</td>
<my-child-component :thing="thing"></my-child-component>
</tr>
</tbody>
</table>
And my child component is like this:
<!-- Child Component -->
<template>
<td>{{ thing.foo }}</td>
<td>{{ thing.bar }}</td>
<td>{{ thing.baz }}</td>
</template>
I know you're required to have a single top level element in Vue (2.0), but I wondered if there's an "invisible" element that I can use. I know you can use v-for in a <template> tag but that won't work in my case.
Or, is there some wrapper that isn't going to break everything. I tried div/span etc but it was horrible and non-semantic.
Basically what I want is for the table header columns to line up with the tbody contents (I have been down the road of having a td with colspan set on it and putting a table inside that, but the columns don't always line up.
PS The real thing is much more complex than the example above, and I am presenting tabular data so don't want to hack about with css to reproduce a table.
Since you say that "the real thing is more complex", it's hard to tell if this will work in your case, but one way to do it could be something like this:
<tbody>
<my-child-component :things="things"></my-child-component>
</tbody>
And then in the child component:
<tr v-for="thing in things">
<td>{{ thing.id }}</td>
<td>{{ thing.foo }}</td>
<td>{{ thing.bar }}</td>
<td>{{ thing.baz }}</td>
</tr>
Not sure if this would work in your scenario?