从vue js中的json nonarray fornmat获取值（后端使用laravel）

Posted 2021-04-19

如果我使用邮递员数据来获取个人资料，例如这样

{
  "status": "success",
  "status_code": 200,
  "message": "OK",
  "data": {
    "id": 2,
    "name": "ahsan",
    "email": "[e-mail]",
    "email_verified_at": "2019-12-24 08:40:35",
    "password": "$2y$10$cr3bRfqZ3Fp3uxnqgInNCugwAdSNury3Nsn6GMl9T36kxT.36GmzS",
    "remember_token": null,
    "created_at": "2019-12-24 08:40:35",
    "updated_at": "2019-12-24 08:40:35",
    "member_pin": "xxxxxxx",
    "google2fa_secret": null,
    "google_2fa enum ""Y"",""N"",": "N",
    "reff_id": ""
  }
}

如何获得价值？因为数据不是数组格式？

我尝试使用v-，因为所有数据都不会像列表数组格式那样呈现

答案

您可以使用Object.keys获取所有键作为数组，并使用v-for获取值

var app = new Vue({
  el: '#app',
  data:{
    test:{
      "status": "success",
      "status_code": 200,
      "message": "OK",
      "data": {
        "id": 2,
        "name": "ahsan",
        "email": "[e-mail]",
        "email_verified_at": "2019-12-24 08:40:35",
        "password": "$2y$10$cr3bRfqZ3Fp3uxnqgInNCugwAdSNury3Nsn6GMl9T36kxT.36GmzS",
        "remember_token": null,
        "created_at": "2019-12-24 08:40:35",
        "updated_at": "2019-12-24 08:40:35",
        "member_pin": "xxxxxxx",
        "google2fa_secret": null,
        "google_2fa enum ""Y"",""N"",": "N",
        "reff_id": ""
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="app">
<div v-for="key in Object.keys(test.data)"><strong>{{key}}</strong> : {{test.data[key]}}</div>
</div>

另一答案

在您的情况下，您只需要在user之类的data属性中存储响应数据，然后只需在html模板中编写以下代码即可：

{{ user.email }}

除非您有多个用户，否则可能不需要v-for。

将以下组件作为示例（适用于多个用户）。

<template>
    <div>
        <h1>Users</h1>
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">Email</th>
                    <th scope="col">First Name</th>
                    <th scope="col">Last Name</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="user in users" :key="user.email">
                    <td> {{ user.email }} </td>
                    <td>{{ user.first_name }}</td>
                    <td>{{ user.last_name }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            users:null,
        }
    },
    created() {
        this.getUsers(); // Will make Laravel API call
    },
    methods: {
        getUsers(){
            this.axios.get("https://reqres.in/api/users").then((response) => {
                this.users = response.data.data;
            });
        }
    }
}
</script>

以上是关于从vue js中的json nonarray fornmat获取值（后端使用laravel）的主要内容，如果未能解决你的问题，请参考以下文章

从 Vue.js 中的 JSON 文件导入数据而不是手动数据

VUE.JS 通过 webpack-simple 中的 axios 从 url 接收一个 json 文件

当用户从 Vue.js 中的 JSON 对象中选择第一个键时，如何显示剩余的键值？

无法将 API JSON 数据呈现到 vue js 中的表

如何通过 vue js 中的 slug（也存在于 json 文件中）从我的 json 文件中获取文章内容？

如何从动态列表中为 Vue 中的 API 响应创建列表渲染 JSON？