CODEWITHSUNDEEP
javascripthtmlvue.jsvuejs2vue-component
fmbra
fmbra

Reputation: 73

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

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.

Upvotes: 1

Views: 233

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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

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

Upvotes: 2

Related Questions