Pass data to a component called inside v-data-table

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.

You want to implement, when a row is clicked, the row expands the child component. am I right here? — chans

chans chans · Accepted Answer · 2019-10-22T11:40:43

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>

Pass data to a component called inside v-data-table

1 Answers