[Vuejs]-Vue.js Problem Controlling Div with v-show

by

0👍

✅

Keep it simple. Template should look like:

   <div v-show="visible == 0">
       First div
    </div>
    <div v-show="visible == 1">
       Second div
    </div>  
   <div v-show="visible == 2">
       Third div
    </div>

data() {
    return {
        visible: null,
    }
}

You can simplify showDiv method to: 

showDiv: function(divNumber) {
    this.visible = divNumber;
}

You can also add method isVisible to check which div is visible:

isVisible(divNumber) {
    return this.visible == divNumber;
}

and use it like:

<div v-show="isVisible(0)">
    First div
</div>

0👍

If you change an array element directly, Vue won’t be able to detect the changes due to JavaScript limitations. You should be able to do it using the corresponding array method:

this.showDetailsDiv.splice(divNumber, 1, true);

You can find more ways of doing it here: https://v2.vuejs.org/v2/guide/list.html#Mutation-Methods

Also, if showDetailsDiv is a prop, you should probably avoid modifying it and create a copy in the component data instead.

Leave a comment