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

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;

}

Which Vuejs version you have used? 1 or 2?

Yashvantsinh Zala
– Yashvantsinh Zala

2017-09-05 09:06:52 +00:00
Commented Sep 5, 2017 at 9:06 — Yashvantsinh Zala
– Yashvantsinh Zala, Commented Sep 5, 2017 at 9:06

Yashvantsinh Zala · Accepted Answer · 2017-09-05 10:51:19Z

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

edited Sep 5, 2017 at 10:51

answered Sep 5, 2017 at 9:19

Yashvantsinh Zala

5311 gold badge3 silver badges11 bronze badges

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

2 Comments

wenus Over a year ago

It's okey, but plis check my css, when someone hover over the tr then all td have special backround - include input type checbox, is there a possibility to have this column "is in store" withous this hover styles?

Yashvantsinh Zala Over a year ago

without hover you can use something like this <table class="table table-hover"> But it's not give same hover style as per your css so it's better to use this css cass

Quezler · Accepted Answer · 2017-09-05 08:59:38Z

1

Try something along the lines of:

<td><input type="checkbox" v-model="order.actual_status"></td>

answered Sep 5, 2017 at 8:59

Quezler

2,41516 silver badges30 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related