I am trying to put the headers for a vuetify v1.5 v-data-table component outside of the data table component itself. Does anyone know how to achieve this? The below does not work:
<template>
<div>
<template slot="headers" slot-scope="props">
<th
v-for="header in props.headers"
:key="header.text"
:class="['table-header']">
{{ header.text }}
</th>
</template>
</div>
//some other unrelated code
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template v-slot:items="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</template>
</v-data-table>
</template>
I don't know if I understand right, let me know in a comment if my unswer is not what you meant.
Proposition: Create one v-data-table with all your headers and data. And above it another v-data-table with just headers.
See how it works in a codepen - v-data-tables
// v-data-table - with items
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template v-slot:items="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</template>
</v-data-table>
// v-data-table - just headers
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
hide-actions
></v-data-table>
data() {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name'
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' }
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%'
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%'
},
],
},
}
Related
I'm new in vue.js, I would like to filter the following table by "Director ID".
When I load the page I would like to show only rows where director ID is 18. I need the table to filter right away without any user input. I would like to "hardcode" the ID 18 in to the function.
Thank you for your help!
<template>
<div>
<div class="row">
<div class="col"><h1 class="mt-3">List of all Movies</h1></div>
</div>
<table class="table">
<thead>
<tr>
<th>Movie ID</th>
<th>Title</th>
<th>Release Year</th>
<th>Director ID</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="movie in movies" :key="movie.id">
<td>{{ movie.id }}</td>
<td>{{ movie.title }}</td>
<td>{{ movie.releaseYear }}</td>
<td>{{ movie.director.id }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data: function () {
return {
movies: [
{
id: 1,
title: "They All Lie",
releaseYear: 1989,
director: {
id: 18,
firstName: "Darci",
lastName: "Overill",
nationality: "China",
birthdate: "07/13/1973",
},
},
{
id: 2,
title: "Star Wars",
releaseYear: 1997,
director: {
id: 18,
firstName: "Darci",
lastName: "Overill",
nationality: "China",
birthdate: "07/13/1973",
},
},
{
id: 3,
title: "Mamma mia",
releaseYear: 2005,
director: {
id: 19,
firstName: "John",
lastName: "Smith",
nationality: "USA",
birthdate: "07/13/1980",
},
},
],
};
},
};
</script>
What if you change the tr to:
<tr v-for="movie in movies" :key="movie.id" v-if="movie.director.id === 18">
UPDATE
We wrote at the same time with #tuhin47.
I prefer his way to be honest with only a minor change in computed.
I changed the el to movie just to be more clear :)
computed: {
filteredMovies() {
return this.movies.filter((movie) => movie.director.id === 18);
},
},
You can use a computed property for filtering data and v-for the filtered data.
Here is the codesandbox
<tbody>
<tr v-for="movie in filteredMovies" :key="movie.id">
<td>{{ movie.id }}</td>
<td>{{ movie.title }}</td>
<td>{{ movie.releaseYear }}</td>
<td>{{ movie.director.id }}</td>
</tr>
</tbody>
Here is the computed property:
computed: {
filteredMovies() {
return this.movies.filter((el) => el.director.id === 18);
},
},
I am trying to create a table that allows me to have one v-select for each row of the "available" column and to save whatever the user selects, being either "In stock" or "unavailable" for that column. How exactly do i do that with the following table that contains the following data?
Table:
<template>
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
>
<template slot="items" slot-scope="props">
<tr #click="props.expanded = !props.expanded">
<td class="text-xs-right">{{ props.item.name}}</td>
<td class="text-xs-right">{{ props.item.calories}}</td>
<td class="text-xs-right">{{ props.item.fat}}</td>
<td class="text-xs-right">{{ props.item.carbs}}</td>
<td class="text-xs-right">{{ props.item.protein}}</td>
<td class="text-xs-right">{{ props.item.available}}</td>
</tr>
</template>
</v-data-table>
</template>
Data:
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
available: '',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
available: '',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
available: '',
},
Use v-select and bind it to item.available on the item slot template...
<template v-slot:item="{ item }">
<tr>
<td>{{item.name}}</td>
<td>{{item.calories}}</td>
<td>{{item.fat}}</td>
<td>{{item.carbs}}</td>
<td>{{item.protein}}</td>
<td>
<v-select
v-model="item.available"
:items="['in stock','unavailable']">
</v-select>
</td>
</tr>
</template>
https://codeply.com/p/9zqiPQEl80
I want to make router like DispatchManage/OM123456ES1, DispatchManage/OM123456ES2 by using dispatchnum data.
What I want to do is when I click dispatchnum.name and then user can see detail page like DispatchManage/OM123456ES1 address.
What should I do? And also when data add, address should be add
Below is my code
-DispatchManage.vue-
<td class="text-xs-center" style="color: #53b4f5">
<router-link :to ="{name: 'DispatchManage', params:{name:item.name}}">{{ props.item.name }}</router-link>
</td>
<td class="text-xs-center">{{ props.item.date }}</td>
<td class="text-xs-center">{{ props.item.status }}</td>
<td class="text-xs-center">{{ props.item.carNum }}</td>
<td class="text-xs-center">{{ props.item.model }}</td>
<td class="text-xs-center">{{ props.item.applicant }}</td>
<td class="text-xs-center">{{ props.item.driver }}</td>
<td class="text-xs-center">{{ props.item.applydate }}</td>
dispatchnum: [
{
value: false,
name: 'OM123456ES1',
date: '19/01/02 12:00:00 - 19/01/03 12:00:00',
},
{
value: false,
name: 'OM123456ES2',
},
{
value: false,
name: 'OM123456ES3',
}
In router directory index.js
{
path: '/DispatchManage/:name',
name: 'DispatchManage',
component: DispatchManage,
}
I would like to create a table with a multiline header, like in this example.
I've found this post, however the answer does not work. Furthermore, I have looked at the Vuetify documentation and Github issues, but there seems to be no solution.
Would be great if someone could let me know whether something like this is possible and if so how.
It turns out you can simply implement your own categories line above the default headers if you just add <thead> in the slot template. Leaving out the <thead> puts it underneath.
<v-data-table ...>
<template v-slot:header="props" >
<thead>
<tr>
<th colspan="2">Category 1</th>
<th colspan="3">Category 2</th>
</tr>
</thead>
</template>
</v-data-table>
You can probably use slot="headerCell". Note that the version of Vuetify used here is 1.5.11
Here's a sample that might give you some pointers:
<v-data-table
v-bind:headers="headers"
v-bind:items="items"
v-bind:search="search"
v-bind:pagination.sync="pagination"
hide-actions
class="elevation-1"
>
<template slot="headerCell" scope="props">
<div slot="activator">
{{ props.header.text }}
</div>
<div>
<span>A</span>
<span>||</span>
<span>B</span>
</div>
</template>
<template slot="items" scope="props">
.....
</template>
</v-data-table>
Here's the codepen link : https://codepen.io/nizantz/pen/KYyLOp
Hope it helps your case.
(Note to moderator who deleted my earlier post: I accidentally posted the answer to a wrong question and I already deleted it.)
This is Core code
<v-data-table :headers="surgeryInformationHeaders" :items="surgeryInformationDesserts" hide-default-footer class="transparent elevation-0 my-4" hide-default-header disable-pagination disable-sort :items-per-page="5">
<template #header="{ }">
<thead class="v-data-table-header">
<tr>
<th v-for="(h,i) in surgeryInformationHeaders" :key="i" class="text-center parent-header td-border-style" :rowspan="h.children?1:2" :colspan="h.children?h.children.length:1">
{{ h.text }}
</th>
</tr>
<tr>
<th v-for="(h1,i1) in getSubHeader(surgeryInformationHeaders)" :key="i1" class="text-center child-header td-border-style">
{{ h1.text }}
</th>
</tr>
</thead>
</template>
<template #item="props">
<tr>
<td v-for="(c,ci) in getRows(props.item)" :key="ci">
{{ c }}
</td>
</tr>
</template>
</v-data-table>
Here's codeopen link https://codepen.io/sunhao1256/pen/MWeZyMe
Here's another sample that might help your case, based on your comment
Note that the data structure needs to be in the right format.(Child elements)
Vue-Template :
<div id="app">
<v-data-table
:headers="headersTop"
:items="tableitems"
hide-actions
>
<template slot="items" scope="props">
<td>
<v-data-table
:headers="[{text:'First Name', value:'fname', sortable:false},
{text:'Last Name', value:'lname', sortable:false}
]"
:items="props.item.name"
hide-actions
>
<template slot="items" scope="props">
<td>{{props.item.fname}}</td>
<td>{{props.item.lname}}</td>
</template>
</v-data-table>
</td>
<td>
<v-data-table
:headers="[{text:'Country', value:'country', sortable:false},
{text:'City', value:'city', sortable:false}
]"
:items="props.item.geo"
hide-actions
>
<template slot="items" scope="props">
<td>{{props.item.country}}</td>
<td>{{props.item.city}}</td>
</template>
</v-data-table>
</td>
</template>
</v-data-table>
</div>
Script:
new Vue({
el: '#app',
data () {
return {
pagination: {},
headersTop:[
{
text: 'Name',
value: 'name',
sortable: false,
},
{
text: 'Geo',
value: 'geo',
sortable: false,
}
],
tableitems:[{
name: [{
fname: 'Dakota',
lname: 'Rice'
},
{
fname: 'Minerva',
lname: 'Hooper'
}],
geo: [{
country: 'Niger',
city: 'Oud-Tunrhout',
},
{
country: 'CuraƧao',
city: 'Sinaai-Waas',
}]
}]
}
}
})
Heres's the codepen link : https://codepen.io/nizantz/pen/rbpNrY
I have 2 computed arrays, homeTeam and awayTeam. The code below does work to generate 2 tables to display the homeTeam and awayTeam, how can I simplify the code to only create the table once and loop through the homeTeam and awayTeam. I tried wrapping it in a v-for with an array of ['homeTeam','awayTeam], but that did not work. The computed works, everything below works, I just want to simplify the template.
<v-flex xs12 md6>
<v-data-table :headers="headers" :items="homeTeam" hide-actions class="elevation-1 white">
<template slot="items" scope="props">
<td class="text-xs-right" v-model="gamesheet.number">{{ props.item.number }}</td>
<td v-model="gamesheet.name">{{ props.item.name }}</td>
</template>
</v-data-table>
</v-flex>
<v-flex xs12 md6>
<v-data-table :headers="headers" :items="awayTeam" hide-actions class="elevation-1 white">
<template slot="items" scope="props">
<td class="text-xs-right" v-model="gamesheet.number">{{ props.item.number }}</td>
<td v-model="gamesheet.name">{{ props.item.name }}</td>
</template>
</v-data-table>
</v-flex>
_
computed: {
homeTeam() {
return this.players.filter((player) => {
return player.team == this.gameinfo.home;
})
},
awayTeam() {
return this.players.filter((player) => {
return player.team == this.gameinfo.away;
})
},
spares() {
return this.players.filter((player) => {
return player.team != this.gameinfo.home && player.team != this.gameinfo.away;
})
},
},
here's my attempt with a v-for, I understand why this would not work.
<template v-for="roster in rosters">
<v-flex xs12 md6>
<v-data-table :headers="headers" :items="roster" hide-actions class="elevation-1 white">
<template slot="items" scope="props">
<td class="text-xs-right" v-model="gamesheet.number">{{ props.item.number }}</td>
<td v-model="gamesheet.name">{{ props.item.name }}</td>
<td class="text-xs-right" v-model="gamesheet.position">{{ props.item.position }}</td>
<td class="text-xs-right" v-model="gamesheet.goal">{{ props.item.goal }}</td>
<td class="text-xs-right" v-model="gamesheet.assist">{{ props.item.assist }}</td>
<td class="text-xs-right" v-model="gamesheet.team">{{ props.item.team }}</td>
</template>
</v-data-table>
</v-flex>
</template>
... and in the script...
data () {
return {
rosters: ['homeTeam', 'awayTeam'],
}
},
computed: {
homeTeam() {
return this.players.filter((player) => {
return player.team == this.gameinfo.home;
})
},
awayTeam() {
return this.players.filter((player) => {
return player.team == this.gameinfo.away;
})
},
I think you could use v-for in this way:
<template v-for="team in [homeTeam, awayTeam]">
<v-flex xs12 md6>
<v-data-table :headers="headers" :items="team" hide-actions class="elevation-1 white">
<template slot="items" scope="props">
<td class="text-xs-right" v-model="gamesheet.number">{{ props.item.number }}</td>
<td v-model="gamesheet.name">{{ props.item.name }}</td>
</template>
</v-data-table>
</v-flex>
</template>
There were a couple problems with your initial try. First computed values are not available to be used in the data function (they are initialized later). Second, you quoted the values, which means that rosters is just an array of two strings.
Another approach you could take would be to make rosters a computed value.
computed:{
rosters(){
return [this.homeTeam, this.awayTeam]
}
}