Club.vue

<template>
    <div class="clubView">
        <h1>Club List</h1>
        <input type="text" id="searchClub" placeholder="Search"> <br>
        <hr>
        <div class="clubList">
            <div class="club" v-for="club in data" :key="club">
                {{club.name}} 
            </div>
        </div>
    </div>
</template>

<script>
import clubForm from '@/components/clubForm.vue'
export default {
    name: 'club',
    components: {
        clubForm
    },
    async created() {
        const res = await this.$http.get('http://jnhonlinux.ddns.net:3000/club')
        if(res.data.success == true) {
            this.data = res.data.result
        }
    },
    data() {
        return {
            data: [],
            name: '',

        }
    }
}
</script>

<style>
.club {
    width: 300px;
    height: 250px;
    border: 2px solid black;
    float: left;
    margin: 20px 10px;
}
#searchClub {
    float: left;
    margin-left: 20px;
}
</style>