Trying to grasp the concepts of vue.js, but struggling with a crucial element.
The goal is to create an accordion functionality for multiple boxes (only one box displayed at a time; opening a new box closes any previously open ones). Here's the current code:
<div id="app">
<div class="block">
<button v-on:click="mytoggle(0,$event)">block one</button>
<div v-if="boxes[0]">
<p>i am box number one</p>
<p>i am box number one</p>
</div>
</div>
<div class="block">
<button v-on:click="mytoggle(1,$event)">block two</button>
<div v-if="boxes[1]">
<p>i am box number two</p>
<p>i am box number two</p>
</div>
</div>
<div class="block">
<button v-on:click="mytoggle(2,$event)">block three</button>
<div v-if="boxes[2]">
<p>i am box number three</p>
<p>i am box number three</p>
</div>
</div>
<pre>{{ $data | json }}</pre>
</div>
and included script:
var vm = new Vue({
el: '#app',
methods: {
mytoggle: function (n, event) {
event.preventDefault();
for(var i = 0; i < 3; i++) { // close all boxes
this.boxes[i] = false;
}
this.boxes[n] = true; // open the corresponding box
console.log(n);
}
},
data: {
boxes: [false,true,false]
}
});
Upon loading the page, the second box is displayed (correct due to the true value in the second element of the boxes array).
However, clicking on the buttons does not update the boxes.array or display the boxes accordingly. The log output confirms the script is functioning correctly when buttons are clicked. It seems like there might be an issue with the binding process. Any guidance on resolving this would be greatly appreciated.