Question

我正在使用Laravel开发API，并且在控制台中从名为“ api / groups”的端点得到以下响应：

Object
data: Array(10)
0:
attributes: Object
description: "Esse doloremque iste aperiam atque minus ab illum dolores 
dignissimos amet illum voluptatem voluptas."
name: (...)
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get description: ƒ reactiveGetter()
set description: ƒ reactiveSetter(newVal)
get name: ƒ reactiveGetter()
set name: ƒ reactiveSetter(newVal)
__proto__: Object
id: (...)
type: (...)
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get attributes: ƒ reactiveGetter()
set attributes: ƒ reactiveSetter(newVal)
get id: ƒ reactiveGetter()
set id: ƒ reactiveSetter(newVal)
get type: ƒ reactiveGetter()
set type: ƒ reactiveSetter(newVal)
__proto__: Object
1: {__ob__: Observer}
2: {__ob__: Observer}
3: {__ob__: Observer}
4: {__ob__: Observer}
5: {__ob__: Observer}
6: {__ob__: Observer}
7: {__ob__: Observer}
8: {__ob__: Observer}
9: {__ob__: Observer}
name: undefined
length: 10
__ob__: Observer {value: Array(10), dep: Dep, vmCount: 0}
__proto__: Array
links: {first: "http://www.styx-occursum.io/api/groups?page=1", last: 
"http://www.bla-bla.io/api/groups?page=2", prev: null, next: 
"http://www.bla-bla.io/api/groups?page=2"}
meta: {current_page: 1, from: 1, last_page: 2, path: "http://www.bla- 
bla.io/api/groups", per_page: 10, …}
__proto__: Object

在Vue组件中，我对此进行了编码：

<template>
     <div class="group-card">
        <div v-for="(group, id) in groups" :key="group.id" class="demo-card- 
wide mdl-card mdl-shadow--2dp">
            <div class="mdl-card__title">
                <h2 class="mdl-card__title-text"> {{ group.name }}</h2>
            </div>
            <div class="mdl-card__supporting-text">
                {{ group.description }}
            </div>
            <div class="mdl-card__actions mdl-card--border">
                <a class="mdl-button mdl-button--colored mdl-js-button mdl- 
js-ripple-effect"> Get Started </a>
            </div>
            <div class="mdl-card__menu">
            <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
            <i class="material-icons">share</i>
            </button>
        </div>
    </div>

<div id="p1" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>

</div>
</template>


<script>

import { setTimeout } from 'timers';
export default {
    data: function() {
        return {
            groups: [{
                name : '',
                description : ''
            }],
        }
    },

methods: {
    getGroups() {
        document.querySelector('.demo-card-wide').style.display = "none";

        setTimeout(() => {
            document.querySelector('.demo-card-wide').style.display = "flex";
            document.querySelector('#p1').style.display = "none";

            axios.get('/api/groups')
            .then((response) => {
                console.log(response.data);
                this.groups = response.data.data; // this generates 10 card 
elements
                this.groups.name = response.data.data.name; // this doesn't 
work
            })
            .catch(error => {
                console.log(error)
            })
        }, 400)
    }
},

mounted() {
console.log('Group Card mounted.');
this.getGroups();
}

}

这意味着：我收到了我在控制器中通过分页声明的那么多卡片元素；但没有显示/渲染属性，并且卡片全部为空。

问题：如何在每个动态生成的卡元素中获取属性“名称”和“描述”？！

从API获取每个json实例的属性

0 个答案: