Html, Vue, Laravel - loop in v-for and table - php

Question

I hava a simple table, every tr is a link with a sepcific order, but I have to have one extra column n th with checking or this order is already in store. ( with checboxes ) I can't to this because when I add this, then all row i a link, but I want to this last column wasn't a link, but simple checboxes.
Here is my code:
<table class="table">
<tr>
<th>Order Number</th>
<th>Name</th>
<th>Tel</th>
<th>Email</th>
<th>Status</th>
<th>Order date</th>
<th>IS in store?</th>
</tr>
<router-link :to="'/orderDetail/'+order.id" tag="tr" v-for="order in orders" :key="order.number"
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>
<td>Here should be checbox with id of roder, but not as a link</td>
</router-link>
</table>
html css :
.order-row:hover td {
cursor: pointer;
transition-duration: 0.3s;
background-color: #EfEEEE;
border-top: 1px solid #e0093e;
border-bottom: 1px solid #e0093e;
color: #e0093e;
}

Answer 1

First create one method, something like this
orderRedirect: function(order) {
this.$router.replace('/orderDetail/' + order.id); // For Vuejs 2
this.$route.router.go('/orderDetail/' + order.id); //For Vuejs 1
},
Then call this function on click from table td, something like this
<table class="table">
<tr>
<th>Order Number</th>
<th>Name</th>
<th>Tel</th>
<th>Email</th>
<th>Status</th>
<th>Order date</th>
<th>IS in store?</th>
</tr>
<tr v-for="order in orders" class="order-row">
<td #click="orderRedirect(order)" style="cursor: pointer">{{order.number}}</td>
<td #click="orderRedirect(order)" style="cursor: pointer">{{order.client_name}}</td>
<td #click="orderRedirect(order)" style="cursor: pointer">{{order.phone}}</td>
<td #click="orderRedirect(order)" style="cursor: pointer">{{order.email}}</td>
<td #click="orderRedirect(order)" style="cursor: pointer">{{order.actual_status}}</td>
<td #click="orderRedirect(order)" style="cursor: pointer">{{order.order_date}}</td>
<td><input type="checkbox"></td>
</tr>
</table>
This is one of way that you can remove link from checkbox td

Answer 2

Try something along the lines of:
<td><input type="checkbox" v-model="order.actual_status"></td>