Question

我正在尝试使用vuejs和laravel制作一个表，但表行/数据彼此分开，成为另一个表。

我试图在vue和控制器中更改一些代码，但最终结果相同。

Customers.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>

控制器（索引）：

class CustomerController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        // Get customer details
        $customers = Customer::orderBy('created_at','desc')->paginate(5);

        //Return collection of Customers as a resource
        return CustomerResource::collection($customers);

    }

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

Answer 1

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

将 v-for 指令移至客户 tr 元素中。

Customers.vue

<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>

如何使用vuejs在laravel中修复我的表行？（行被分成其他表）

1 个答案: