从 vue js 中的 json 非数组格式获取值（后端使用 laravel）答案

【问题标题】：get value from json nonarray fornmat in vue js (backend use laravel)从 vue js 中的 json 非数组格式获取值（后端使用 laravel）
【发布时间】：2020-04-16 11:55:12
【问题描述】：

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

{
  "status": "success",
  "status_code": 200,
  "message": "OK",
  "data": {
    "id": 2,
    "name": "ahsan",
    "email": "ahsan@gmail.com",
    "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-for 所有数据将显示不像列表数组格式那样呈现

【问题讨论】：

这是一个 JSON 数据，所以你可以使用 JSON.parse() 来解析字符串。
很明显，您没有使用 Eloquent，因为出于安全原因，您不应该传递密码或其哈希值。另外，您应该传递 Google2fa_secret 吗？你真的应该花点时间看看这些东西。

标签： laravel api vue.js

【解决方案1】：

您可以使用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": "ahsan@gmail.com",
        "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>

另一种在vuejs中循环的方式v-for="key,index in test.data"

var app = new Vue({
  el: '#app',
  data:{
    test:{
      "status": "success",
      "status_code": 200,
      "message": "OK",
      "data": {
        "id": 2,
        "name": "ahsan",
        "email": "ahsan@gmail.com",
        "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,index in test.data"><strong>{{key}}</strong> : {{test.data[index]}}</div>
</div>

【讨论】：

【解决方案2】：

在您的情况下，您只需将响应数据存储在 user 之类的数据属性中，然后只需在 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>

【讨论】：