如何使用vuejs修复laravel中的我的表行？（将行分隔到其他表中）

我试图用vuejs和laravel创建一个表，但是表行/数据会作为另一个表分开

我尝试过在vue和控制器中更改一些代码，但结果都是一样的

客户.vue

<template>
    <div>
        <h2>Customer Details</h2>
        <div class="table table-bordered" v-for="customer in customers" v-bind:key="customer.CustomerID">

        <tr>
            <th>ID</th>
            <th>Customer</th>
            <th>Address</th>
            <th>Contact No.</th>
        </tr>
            <tr>
                <td>{{customer.CustomerID}}</td>
                <td>{{customer.Customer}}</td>
                <td>{{customer.Address}}</td>
                <td>{{customer.CustomerContactNo}}</td>
            </tr>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            customers: [],
            customer: {
                CustomerID: '',
                Customer: '',
                Address: '',
                CustomerContactNo: ''
            }, 
            customer_CustomerID:'',
            pagination: {},
            edit: false
        }
    },

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

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

<template>
    <div>
        <h2>Customer Details</h2>
        <table class="table table-bordered">
        <tr>
            <th>ID</th>
            <th>Customer</th>
            <th>Address</th>
            <th>Contact No.</th>
        </tr>
            <tr v-for="customer in customers" v-bind:key="customer.CustomerID">
                <td>{{customer.CustomerID}}</td>
                <td>{{customer.Customer}}</td>
                <td>{{customer.Address}}</td>
                <td>{{customer.CustomerContactNo}}</td>
            </tr>
        </table>
    </div>
</template>

---

我希望这个表只是一个表，而不是每一行都变成一个单独的表。谢谢。

这是因为您在table元素上有一个v-for循环，意味着它为每个客户创建了一个新表

• 将v-for指令移动到客户tr元素中

客户.vue

<template>
    <div>
        <h2>Customer Details</h2>
        <div class="table table-bordered" v-for="customer in customers" v-bind:key="customer.CustomerID">

        <tr>
            <th>ID</th>
            <th>Customer</th>
            <th>Address</th>
            <th>Contact No.</th>
        </tr>
            <tr>
                <td>{{customer.CustomerID}}</td>
                <td>{{customer.Customer}}</td>
                <td>{{customer.Address}}</td>
                <td>{{customer.CustomerContactNo}}</td>
            </tr>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            customers: [],
            customer: {
                CustomerID: '',
                Customer: '',
                Address: '',
                CustomerContactNo: ''
            }, 
            customer_CustomerID:'',
            pagination: {},
            edit: false
        }
    },

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

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

<template>
    <div>
        <h2>Customer Details</h2>
        <table class="table table-bordered">
        <tr>
            <th>ID</th>
            <th>Customer</th>
            <th>Address</th>
            <th>Contact No.</th>
        </tr>
            <tr v-for="customer in customers" v-bind:key="customer.CustomerID">
                <td>{{customer.CustomerID}}</td>
                <td>{{customer.Customer}}</td>
                <td>{{customer.Address}}</td>
                <td>{{customer.CustomerContactNo}}</td>
            </tr>
        </table>
    </div>
</template>

客户详细信息
身份证件
顾客
地址
联络电话。
{{customer.CustomerID}
{{customer.customer}}
{{customer.Address}}
{{customer.CustomerContactNo}