如何将移动端部分数据渲染

Question

<template>
    <view class="kind">
        <view class="list" v-for="item in findAllCategory" :key="item.id">
            <image :src="item.icon" mode=""></image>
            <view class="name">{{{item.name}}</view>
        </view>
    </view>
</template>

<script>
    import {
        findAllCategory
    } from '@/api/kind/index.js'
    export default {
        data() {
            return {
                findAllCategory: [],
            };
        },
        onLoad(option) {
            findAllCategory().then(res => {
                console.log("创意", res);
                this.findAllCategory = res.data.items;
            })
        }
    }
</script>

<style lang="scss" scoped>
    @import 'kind.scss'
</style>

请问一下大家,当上面的接口调用成功之后,将数据渲染到页面上,如何才能实现在渲染数据的过程中只将 items 下的 第0项中 的 children里面的四项数据渲染出来,这里搞不出来,

Answer 1

this.findAllCategory = res.data.items[0].children;

<template>
    <view class="kind">
        <view class="list" v-for="item in findAllCategory" :key="item.id">
            <image :src="item.icon" mode=""></image>
            <view class="name">{{{item.name}}</view>
        </view>
    </view>
</template>
 
<script>
    import {
        findAllCategory
    } from '@/api/kind/index.js'
    export default {
        data() {
            return {
                findAllCategory: [],
            };
        },
        onLoad(option) {
            findAllCategory().then(res => {
                console.log("创意", res);
                this.findAllCategory = res.data.items[0].children;
            })
        }
    }
</script>
 
<style lang="scss" scoped>
    @import 'kind.scss'
</style>