循环阵列与laravel中的vue

Question

请有人帮我解决以下问题。我想通过laravel中的vue中的循环运行一个简单的数组，以便在表中提供所有数组值。这是我从我在互联网上找到的教程调整的代码：在这里输入代码

<template>
    <div>
        <h1>Coffeetypes</h1>
        
        <table class="table table-hover">
            <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Description</th>
            </tr>
            </thead>
            <tbody>
                <tr v-for="cctyp in cctypes" v-bind:key="cctyp.id">
                    <td>{{ cctyp.id }}</td>
                    <td>{{ cctyp.name }}</td>
                    <td>{{ cctyp.description }}</td>
                    <td><button class="btn btn-danger">Delete</button></td>
                </tr>
            </tbody>
        </table>

    </div>
</template>

<script>
export default {
    data() {
        return {
            
            cctypes: [],
            cctyp: {
                id: '',
                name: '',
                description: '',
                created_by: '',
                updated_by: ''
            }, 
            id: '',
            pagination: {},
            edit: false
        };
    }, 

    created() {
        this.fetchCCTypes();
    },

    methods: {
        fetchCCTypes(){
            fetch('api/CCTypes')
            .then(res => res.json())
            .then(res => {
                this.cctypes = res.data;
            });
        }
    }
};
</script>

问题是，表中没有填写。

Answer 1

也许这是你的fetch方法中的双qazxsw poi ...你应该首先控制你的数据...