Vue.js Problem Controlling Div with v-show - vue.js

Question

I have four buttons and corresponding four divisions. On clicking first button, I want to display first div, on clicking the second button, I want to display the second div, and so on.
The button click event calls a method with the division number (0 through 3)
#click="showDiv(0)" for first button and #click="showDiv(1)" for the second button. This is my showDiv() method
showDiv: function(divNumber)
showDiv: function(divNumber)
{
this.showDetailsDiv.forEach(function(item, index, array) {
array[index]=null;
});
this.showDetailsDiv[divNumber] = true;
console.log(this.ShowDetailsDiv);
}
The initial value of showDetailsDiv prop is array with null values
showDetailsDiv: [
null,
null,
null,
null
],
In template, I am trying to control the divisions through v-show
<div v-show="showDetailsDiv[0]">
First div
</div>
<div v-show="showDetailsDiv[1]">
Second div
</div>
<div v-show="showDetailsDiv[2]">
Third div
</div>
When I click the button, I see that the corresponding element of showDetailsDiv is changing to true, however, the corresponding division does not display. Is there anything wrong in my logic?
When I try to control the display of division using direct properties (e.g. showDiv0, showDiv1, showDiv2 & showDiv3) with the following code, it works.
showDiv: function(divNumber)
{
this.showDetailsDiv.forEach(function(item, index, array) {
array[index]=null;
});
this.showDetailsDiv[divNumber] = true;
console.log(this.showDetailsDiv);
this.showDiv0= false;
this.showDiv1= false;
this.showDiv2= false;
this.showDiv3= false;
let elementID = 'showDiv' + divNumber;
this[elementID] = true;
}
<div v-show="showDiv0">
First div
</div>
<div v-show="showDiv1">
Second div
</div>
<div v-show="showDiv2">
Third div
</div>
Any suggestions?

Answer 1

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>

Answer 2

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.