showing Div inside td of a table is not reactive using Vue

Question

I have a table that the last column is a div where I have three options (View, Edit and delete). This sub menu is always hidden, but when I click in the options button that is the last column of my table, the array that I use to control what is showing is updated to true (it should be showing), but nothing happened in my page.

Here is my HTML code

<td class="kt-datatable__cell">
    <span style="overflow: visible; position: relative; width: 197px;">
        <center>
            <div class="dropdown">
                <a data-toggle="dropdown" class="btn btn-sm btn-clean btn-icon btn-icon-md" @click="toggleHover(index)"
                 v-bind:class="{'show': hover[index]}">
                    <i class="flaticon2-shield"></i>
                </a>
                <div v-bind:class="{'show': hover[index]}" class="dropdown-menu">

And here is my method that I call using @click

methods: {
    toggleHover(index) {
        this.hover[index] = !this.hover[index];
    }

If I set true for a random position right after I get the data from the server, it shows, but when I try to change this by clicking, nothing happens.

tony19 · Accepted Answer · 2022-07-15 23:40:49Z

2

It's a reactivity caveat, so you should do :

methods: {
    toggleHover(index) {
        this.$set(this.hover,index , !this.hover[index]);
    }

edited Jul 15, 2022 at 23:40

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 25, 2019 at 13:55

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

Collectives™ on Stack Overflow

showing Div inside td of a table is not reactive using Vue

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