[Vuejs]-Html, Vue, Laravel – loop in v-for and table

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

1πŸ‘

Try something along the lines of:

<td><input type="checkbox" v-model="order.actual_status"></td>
πŸ‘€Quezler

Leave a comment