javascript - 如何在 vue.js 和 laravel 中显示数组响应？

Question

我想在 .vue 文件中显示数组数据，但我不确定该怎么做。这是我试过的:

<template>
    <div id="app">
        <table class="table table-striped">
          <thead>
             <tr>
                <th>Project Name</th>
                <th>Type</th>
             </tr>
          </thead>
          <tfoot>
             <tr v-for="user in info">
                <th>{{ user.data.user.assigned_projects.name }}</th>
                <th>{{ user.data.user.assigned_projects.type }}</th>
             </tr>
          </tfoot>
        </table>
    </div>
</template>

<script>
import axios from 'axios'

export default {
  el: '#app',
  data() {
    return {
      info: null
    }
  },
  mounted() {
    axios
      .get('http://api_url')
      .then((response) => {
        this.info = response.data
      })
  }
}
</script>

这是一个示例 API 响应:

{
   "response":{
      "error":{
         "error_code":0,
         "error_msg":"",
         "msg":""
      },
      "data":{
         "user":{
            "id":1,
            "email":"email@address.com",
            "first_name":null,
            "last_name":null,
            "photo_url":null,
            "organisation":null,
            "own_projects":[
            ],
            "assigned_projects":[
               {
                  "id":10,
                  "name":"test project",
                  "description":"cool stuff",
                  "image_url":"http://image_url",
                  "timezone":"UTC",
                  "owner":15,
                  "created_by":15,
                  "created_at":"2019-02-26 16:37:03",
                  "updated_at":"2019-02-26 16:37:03",
                  "pivot":{
                     "user_id":1,
                     "project_id":10
                  }
               },
               {
                  "id":8,
                  "name":"test project 2",
                  "description":"",
                  "image_url":"",
                  "timezone":"UTC",
                  "owner":15,
                  "created_by":15,
                  "created_at":"2019-02-21 18:36:55",
                  "updated_at":"2019-02-21 18:36:55",
                  "pivot":{
                     "user_id":1,
                     "project_id":8
                  }
               }
            ]
         }
      }
   }
}

Answer 1

一般来说，v-for指令采用 v-for="item in items" 的形式，其中 items 是数组或对象的数据路径。

assigned_projects[] 的数据路径是 info.response.data.user.assigned_projects，因此 v-for 将是:

<tr v-for="project in info.response.data.user.assigned_projects" :key="project.id">
  <th>{{ project.name }}</th>
  <th>{{ project.id }}</th>
</tr>

new Vue({
  el: '#app',
  data() {
    return {
      info: null
    }
  },
  mounted() {
    this.info = {
   "response":{
      "error":{
         "error_code":0,
         "error_msg":"",
         "msg":""
      },
      "data":{
         "user":{
            "id":1,
            "email":"email@address.com",
            "first_name":null,
            "last_name":null,
            "photo_url":null,
            "organisation":null,
            "own_projects":[
            ],
            "assigned_projects":[
               {
                  "id":10,
                  "name":"test project",
                  "description":"cool stuff",
                  "image_url":"http://image_url",
                  "timezone":"UTC",
                  "owner":15,
                  "created_by":15,
                  "created_at":"2019-02-26 16:37:03",
                  "updated_at":"2019-02-26 16:37:03",
                  "pivot":{
                     "user_id":1,
                     "project_id":10
                  }
               },
               {
                  "id":8,
                  "name":"test project 2",
                  "description":"",
                  "image_url":"",
                  "timezone":"UTC",
                  "owner":15,
                  "created_by":15,
                  "created_at":"2019-02-21 18:36:55",
                  "updated_at":"2019-02-21 18:36:55",
                  "pivot":{
                     "user_id":1,
                     "project_id":8
                  }
               }
            ]
         }
      }
   }
};
  }
})

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tfoot th {
  font-weight: normal;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}

<script src="https://unpkg.com/vue@2.6.8"></script>

<div id="app">
  <table>
    <thead>
      <tr>
        <th>Project Name</th>
        <th>Type</th>
      </tr>
    </thead>
    <tfoot>
      <tr v-for="project in info.response.data.user.assigned_projects" :key="project.id">
        <th>{{ project.name }}</th>
        <th>{{ project.id }}</th>
      </tr>
    </tfoot>
  </table>
</div>

为了简化模板以提高可读性，computed property应该在这里考虑:

// template
<tr v-for="project in projects" :key="project.id">...</tr>

// script
computed: {
  projects() {
    // empty array if `this.info` is not yet defined
    return this.info && this.info.response.data.user.assigned_projects || [];
  }
}

new Vue({
  el: '#app',
  data() {
    return {
      info: null
    }
  },
  computed: {
    projects() {
      return this.info && this.info.response.data.user.assigned_projects || [];
    }
  },
  mounted() {
    this.info = {
   "response":{
      "error":{
         "error_code":0,
         "error_msg":"",
         "msg":""
      },
      "data":{
         "user":{
            "id":1,
            "email":"email@address.com",
            "first_name":null,
            "last_name":null,
            "photo_url":null,
            "organisation":null,
            "own_projects":[
            ],
            "assigned_projects":[
               {
                  "id":10,
                  "name":"test project",
                  "description":"cool stuff",
                  "image_url":"http://image_url",
                  "timezone":"UTC",
                  "owner":15,
                  "created_by":15,
                  "created_at":"2019-02-26 16:37:03",
                  "updated_at":"2019-02-26 16:37:03",
                  "pivot":{
                     "user_id":1,
                     "project_id":10
                  }
               },
               {
                  "id":8,
                  "name":"test project 2",
                  "description":"",
                  "image_url":"",
                  "timezone":"UTC",
                  "owner":15,
                  "created_by":15,
                  "created_at":"2019-02-21 18:36:55",
                  "updated_at":"2019-02-21 18:36:55",
                  "pivot":{
                     "user_id":1,
                     "project_id":8
                  }
               }
            ]
         }
      }
   }
};
  }
})

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tfoot th {
  font-weight: normal;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}

<script src="https://unpkg.com/vue@2.6.8"></script>

<div id="app">
  <table>
    <thead>
      <tr>
        <th>Project Name</th>
        <th>Type</th>
      </tr>
    </thead>
    <tfoot>
      <tr v-for="project in projects" :key="project.id">
        <th>{{ project.name }}</th>
        <th>{{ project.id }}</th>
      </tr>
    </tfoot>
  </table>
</div>