Question

我想在我的表中将所有tr作为路由器链接，但是当我在tr之前添加它时，表中的每个css都会消失，我的View看起来很糟糕。有可能做得更好吗？

<table v-if="seenOrders" id="ordersTable" class="table">
        <tr>
            <th>Numer zamówienia</th>
            <th>Imię</th>
            <th>Telefon</th>
            <th>Email</th>
            <th>Status</th>
            <th>Data zamówienia</th>
        </tr>

        <router-link to="/orderDetail" class="order-row" >
        <tr v-for="order in orders" v-on:click="details(order.id)">
            <td>{{order.number}}</td>
            <td>{{order.client_name}}</td>
            <td>{{order.phone}}</td>
            <td>{{order.email}}</td>
            <td>{{order.actual_status}}</td>
            <td>{{order.order_date}}</td>
        </tr>
        </router-link>
    </table>

Answer 1

默认情况下，

<router-limk>会呈现为<a>元素。如果您想更改<router-link>呈现的方式，请使用tag道具（在您的情况下为<tr>）

<router-link to="/orderDetail" tag="tr" class="order-row" >

所以你的代码应该是

<table v-if="seenOrders" id="ordersTable" class="table">
    <tr>
        <th>Numer zamówienia</th>
        <th>Imię</th>
        <th>Telefon</th>
        <th>Email</th>
        <th>Status</th>
        <th>Data zamówienia</th>
    </tr>

    <router-link to="/orderDetail" v-for="order in orders" tag="tr" class="order-row" >
        <td>{{order.number}}</td>
        <td>{{order.client_name}}</td>
        <td>{{order.phone}}</td>
        <td>{{order.email}}</td>
        <td>{{order.actual_status}}</td>
        <td>{{order.order_date}}</td>
    </router-link>
</table>

请参阅<router-link>

的标记部分

Laravel Vue路由

1 个答案: