어레이 응답을 vue.js 및 larabel로 표시하는 방법

어레이 응답을 vue.js 및 larabel로 표시하는 방법

어레이 데이터를 표시하다.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
                  }
               }
            ]
         }
      }
   }
}

일반적으로 명령어는 다음과 같은 형식을 취합니다.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>

읽기 쉽도록 템플릿을 단순화하기 위해 계산된 속성을 고려해야 합니다.

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

언급URL : https://stackoverflow.com/questions/54996922/how-to-display-array-response-in-vue-js-and-laravel