Laravel Vue Routing

Question

I would like to hava all tr as a router link in my table, but when I add this before tr, then every css from table disappear and my View looks bad. Is a possibility to do this better?

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

Vamsi Krishna · Accepted Answer · 2017-08-24 08:04:08Z

1

<router-limk> will by default render as a <a> element. If you want to change how the <router-link> should render use the tag prop (in your case <tr>)

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

So your code should be

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

See tag section of <router-link>

edited Aug 24, 2017 at 8:04

answered Aug 24, 2017 at 7:54

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel Vue Routing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related