将数据传递给v- data表中调用的组件。

Question

我有一个v数据表，我在每个表中都添加了一个可扩展的div，作为组件使用。我不知道如何将数据从选定的v数据表传递给组件。我用的是单文件组件。

ScanGrid组件(父组件)：

<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组件(我希望在v-数据表项中使用扩展的div )：

<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>

我在上1.5.19节课。我认为我的问题在于ScanGrid中的时隙范围，但我不确定。

Answer 1

您的代码几乎是正确的，您需要向父组件和子组件添加一些额外的修复程序。

父组件

<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>

子组件中的

<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>