CODEWITHSUNDEEP
phplaravelvue.js
wenus
wenus

Reputation: 1505

Laravel Vue Routing

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>

Upvotes: 1

Views: 36

Answers (1)

Vamsi Krishna
Vamsi Krishna

Reputation: 31362

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

Upvotes: 1

Related Questions