如何从另一个数组中的数组中检索数据并将其显示在表中？

Question

使用Vue.js，我能够检索并显示id，description和location，但为什么在tasks列中我只在所有行中都有[object Object]？ （任务是作业数组中的数组）

<template>
<div>
...
<table class="table table-hover">
  <thead>
    <tr>
      <th v-for="column in columns">
        ...
      </th>
    </tr>
  </thead>
  <tbody>

    <tr v-for="work in jobs">
      <td>{{work["id"]}}</td>
      <td>{{work["description"]}}</td>
      <td>{{work["location"]}}</td>
      <td v-for="tasks in jobs" >{{work["tasks"]}}</td>
    </tr>

  </tbody>
</table>

    

<script> 
export default{

data : function() {
  return{
      columns: ['id', 'description', 'location', 'tasks'],
      jobs: '',
      update: this.getData()    
  }
},

methods: {
//to get data from the backend API
  getData() {
    this.$http
      .get('http://localhost:3001/api', (data) => {
        this.jobs = data["jobs"]
      })
  }
}
</script>

Answer 1

您正在迭代jobs而不是job's tasks

中的每项任务

你应该做类似的事情 -

        <tr v-for="work in jobs">
          <td>{{work["id"]}}</td>
          <td>{{work["description"]}}</td>
          <td>{{work["location"]}}</td>
          <td v-for="task in work.tasks" >{{task["id"]}} -
 {{task["description"]}} - {{task["location"]}}</td>
        </tr>

或者你想在那里展示。但我们的想法应该是迭代每个tasks对象

中的work数组

Answer 2

您需要明确提取要在tasks中显示的字段。此外，嵌套v-for的语法类似于task in work.tasks，因此task指向tasks数组中每个work数组中的每个任务<tr v-for="work in jobs"> <td>{{work["id"]}}</td> <td>{{work["description"]}}</td> <td>{{work["location"]}}</td> <td v-for="task in work.tasks"> {{task["id"]}} <br> {{task["description"]}} <br> {{task["location"]}} </td> </tr> ：

{{1}}