Pass data to a component called inside v-data-table - vue.js

Question

I have a v-data-table and I added an expandable div to each of them that I want to use as a component. I'm not sure how to pass the data from the selected v-data-table to the component. I'm using single file components.
ScanGrid component(parent):
<template>
<v-container>
<v-card>
<v-card-text>
<v-layout row align-center>
<v-data-table
:headers="headers"
:items="items"
:hide-actions="true"
item-key="id"
>
<template slot="items" slot-scope="props">
<tr #click="props.expanded = !props.expanded">
<td>{{ props.item.name }}</td>
<td class="text-xs-right pr-5">{{ props.item.scanned }}</td>
<td class="text-xs-right pr-5">{{ props.item.incoming }}</td>
<td class="text-xs-right pr-5">{{ props.item.outgoing }}</td>
<td class="text-xs-right pr-5">{{ props.item.unknown }}</td>
</tr>
</template>
<div :value="items">
<ScanGridChild></ScanGridChild>
</div>
</v-data-table>
</v-layout>
</v-card-text>
</v-card>
</v-container>
</template>
<script>
import ScanGridChild from "./ScanGridChild";
export default {
name: "ScanGrid",
props: {},
components: {
ScanGridChild
},
data: () => ({
selected: [],
items: [
{
id: 1,
name: "Location 1",
scanned: 159,
incoming: 6,
outgoing: 24,
unknown: 4,
test: "Test 1"
},
{
id: 2,
name: "Location 2",
scanned: 45,
incoming: 6,
outgoing: 24,
unknown: 4,
test: "Test 2"
}
],
totalResults: 0,
loading: true,
pagination: {},
headers: [
{
text: "Localisation",
sortable: true,
value: "name"
},
{
text: "Paquets scannés",
sortable: true,
value: "scanned"
},
{
text: "Paquets entrants",
sortable: true,
value: "incoming"
},
{
text: "Paquets sortants",
sortable: true,
value: "outgoing"
},
{
text: "Paquets inconnus",
sortable: true,
value: "unknown"
}
]
}),
mounted() {},
methods: {},
watch: {}
};
</script>
<style lang="scss" scoped></style>
ScanGridChild component(What I want to use for the expanded div in the v-data-table item):
<template v-slot:expand="props">
<v-card flat>
<v-card-text>{{ props.item.test }}</v-card-text>
</v-card>
</template>
<script>
export default {
name: "ScanGridChild",
props: {
value: {
Type: String,
Required: true
}
},
async mounted() {
await this.render();
},
computed: {},
watch: {
props: function(newVal, oldVal) {
console.log("Prop changed: ", newVal, " | was: ", oldVal);
this.render();
}
}
};
</script>
<style></style>
I'm on Vuetify 1.5.19.
I think my problem is with the slot-scope in ScanGrid but I'm not sure.

Answer 1

Your code is almost correct, You need to add some additional fix to parent and child component
Parent component
<template>
<v-container>
<v-card>
<v-card-text>
<v-layout row align-center>
<v-data-table
:headers="headers"
:items="items"
:hide-actions="true"
item-key="id"
>
<template slot="items" slot-scope="props">
<tr #click="props.expanded = !props.expanded">
<td>{{ props.item.name }}</td>
<td class="text-xs-right pr-5">{{ props.item.scanned }}</td>
<td class="text-xs-right pr-5">{{ props.item.incoming }}</td>
<td class="text-xs-right pr-5">{{ props.item.outgoing }}</td>
<td class="text-xs-right pr-5">{{ props.item.unknown }}</td>
</tr>
</template>
<template slot="expand" slot-scope="props">
<ScanGridChild v-bind:testName="props.item.test"></ScanGridChild>
</template>
</v-data-table>
</v-layout>
</v-card-text>
</v-card>
</v-container>
</template>
In Child Component
<template>
<v-card flat>
<v-card-text>{{ testName }}</v-card-text>
</v-card>
</template>
<script>
export default {
name: "ScanGridChildComponent",
props: {
testName: {
Type: String,
Required: true
}
}
};
</script>