I'm new at Vue developer and I make a V-Data-Table consuming a JSON with vue-resource. That´s done already, but now I want to show/hide child rows based on user selection.
e.g.: click on '+' and the table shows the rows, click on '-'and the table hide the rows.
<template>
<v-app>
<div>
<v-flex xs12 sm6 d-flex>
<v-select
v-if="retornoDoJson"
:items="retornoDoJson.nations"
v-model="paisSelecionado"
label="Selecione Um"
v-on:change="selectionChanged"
single-line
menu-props="bottom"
></v-select>
</v-flex>
</div>
<div v-if="paisSelecionado">
<v-data-table :headers="headers" :items="retornoDoJson.top_10s[paisSelecionado]" hide-actions>
<template slot="items" slot-scope="props">
<v-btn fab dark color="indigo">
<v-icon dark>add</v-icon>
</v-btn>
<td class="parent-row">{{ props.item.name }}</td>
<td class="child-row">{{ props.item.club }}</td>
<td class="child-row">{{ props.item.phy }}</td>
<td class="parent-row">{{ props.item.age }}</td>
<td class="parent-row">{{ props.item.pas }}</td>
<td class="child-row">{{ props.item.nationality }}</td>
</template>
</v-data-table>
</div>
</v-app>
</template>
<script>
export default {
data() {
return {
paisSelecionado:undefined,
headers: [
{
text: ' ',
align: 'left',
sortable: false,
value: 'name'
},
{ text: 'name', value: 'name' },
{ text: 'club', value: 'club' },
{ text: 'phy', value: 'phy' },
{ text: 'age', value: 'age' },
{ text: 'pas', value: 'pas' },
{ text: 'nationality', value: 'nationality' }
],
retornoDoJson: []
};
},
methods: {
loadApi() {
this.$http
.get("http://localhost:8080/data.json")
.then(this.successCallback, this.errorCallback);
},
successCallback: function(resposta) {
this.retornoDoJson = resposta.data;
console.log(this.retornoDoJson);
},
selectionChanged: function() {
console.log("selecionarItem:this.selecionarPais:", this.paisSelecionado);
}
},
mounted() {
this.loadApi();
}
};
</script>
<style>
</style>
There's any way to do that?
If I understood you correctly, I hope this helps, also you can check a working example here: https://codepen.io/anon/pen/zemZoB
<template slot="items" scope="props">
<template v-if="props.item.show">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">
<v-btn @click.native="props.item.show = false">
Hide
</v-btn>
</td>
</template>
<template v-else>
<v-btn @click.native="props.item.show = true">
Show
</v-btn>
</template>
</template>