如何使用Vuetify使用主表字段作为api的参数使用api调用填充v-data-table的子表

Question

我最近开始从事Vue / Vuetify的工作。我有v-data表，可从api提取数据。然后，我需要扩展以调用另一个api以获得详细信息。

父数据字段（唯一字段之一）必须是一个参数。我不知道如何将参数传递给getDetail（请参见下面的代码）函数。但是，在进行调试时，我发现expanded对象在扩展时已正确设置为jobname:true。我不是如何在子表中访问该函数，然后再访问该函数。

我现在已经尝试了所有方法，但是我确信我错过了一些令人沮丧的非常基本的东西。感谢您查看

V数据表

职位名称持续时间状态

xyz 0:54:99成功

abc 00:30失败

def 00:55中止

通过api调用http://localhost:8082/api/myapp/jobs

填充数据

在点击 xyz 时，表格会展开，并显示另一个带有新api调用的表格，如下所示： http://localhost:8082/api/myapp/jobs/xyz，请注意，xyz是作为参数传递的

到目前为止的代码是

     <v-data-table
            :headers="tableHeaders"
            :items="jobs"
            :search="search"
            :expand="expand"
            :pagination.sync="pagination"
            class="elevation-5"
            item-key="name"
          >
            <v-progress-linear
              slot="progress"
              color="blue"
              indeterminate/>

            <template
              slot="items"
              slot-scope="props">
              <!--slot-scope="{items}">-->
              <tr @click="props.expanded =!props.expanded">
                <td class="font-weight-bold">{{ props.item.name }}</td>
                <td>{{ props.item.lastBuild.duration }}</td>
                <td>
                  <v-chip
                    color="blue-grey darken-1"
                    text-color="white"
                  >
                    <v-avatar class="amber darken-4">{{ props.item.testResults.ABORTED }}</v-avatar>
                    Abort
                  </v-chip>
                  <v-chip
                    color="red lighten-3"
                    text-color="white"
                  >
                    <v-avatar class="red">{{ props.item.testResults.FAILURE }}</v-avatar>
                    Fail
                  </v-chip>
                  <v-chip
                    color="secondary"
                    text-color="white">
                    <v-avatar class="teal">
                      {{ props.item.testResults.SUCCESS }}
                    </v-avatar>
                    Pass
                  </v-chip>

                <!--<td class="text-xs-right">{{ item.salary }}</td>-->
                </td>
                <td>{{ props.item.color }}</td>
                <td>
                  <v-btn
                    round
                    class="primary"
                    @click="dialog=true"
                  >
                    <v-icon >mdi-send</v-icon>
                  </v-btn>
                </td>

              </tr>
            </template>
            <template
              slot="expand"
              slot-scope="props">

              <v-data-table
                :headers="subHeader"
                :items="testInfo"
              >
                <template
                  slot="items"
                  slot-scope="props">
                  <td> {{ props.item.id }}</td>
                  <td>{{ props.item.duration }}</td>

                </template>
              </v-data-table>
            </template>
            <v-alert
              slot="no-results"
              :value="true"
              color="error"
              icon="mdi-alert">
              Your search for "{{ search }}" found no results.
            </v-alert>
            <template
              v-if="jobs"
              slot="no-data">
              <v-alert
                :value="true"
                color="error"
                icon="mdi-alert"
              >
                Sorry, No data to display (Check API)
              </v-alert>
            </template>
          </v-data-table>
          <div class="text-xs-center pt-2">
            <v-pagination
              v-model="pagination.page"
              :length="pages"/>
          </div>

        </material-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>
        <script>
       import axios from 'axios'
export default {
  data: () => ({
    expand: false,
     tableHeaders: [
      {
        'text': 'Environment',
        'value': 'name'
      },
      {
        'text': 'Duration'
      },
      {
        'text': 'Stats (All)',
        'align': 'left'
      },
      {
        'text': 'Status (current)'
      },
      {
        'text': 'Action'
      }

    ],
    jobs: [],
    testInfo: [],
    search: '',
    timer: '',
    pagination: {
      rowsPerPage: 7
    },
    subHeader: [{
      'text': 'Test id',
      'value': 'id'
    },
    {
      'text': 'Duration'
    },
    {
      'text': 'info'
    },

    {
      'text': 'Overall Status'
    },
    {
      'text': 'Show stdout'
    },
    {
      'text': 'Action'
    }
    ]
  }),
  computed: {
    pages () {
      return this.pagination.rowsPerPage
        ? Math.ceil(this.jobs.length /
                        this.pagination.rowsPerPage) : 0
    }
  },
  created: function () {
    this.getJobs()
    this.getDetails()

      this.timer = setInterval(this.getJobs, 60000)
  },
  methods: {
    getJobs: function () {
      axios.get('http://127.0.0.1:8085/api/jobs')
        .then(response => {
          this.jobs = response.data
          // console.log(this.jobs)
        })
        .catch(response => {
          console.log(response)
        })
    },
    getDetails: function (job_name) {
      axios.get('http://127.0.0.1:8085/api/jobs/' + 'job_name')
        .then(response => {
          this.testInfo = response.data
        })
        .catch(response => {
          console.log(response)
        })
    }

  }
}
</script>