Instead of using a few methods that are structured like this:
showDiv1(){
this.showDiv1 = true
},
showDiv2(){
this.showDiv2 = true
}
I am attempting to consolidate them into one method like so:
showElements(...elementNames){
elementNames.forEach(name => {
this.$data.name = true
})
}
The concept behind this approach is to pass one or more properties from the data object, and when calling the method, those elements will be displayed on the screen.
In my data object, the structure looks something like this:
data() {
return {
div1 = false,
div2 = false
}
}
Within the HTML, I attempted to trigger the function on click in a couple of different ways:
<button @click="showElements('div1')">Show<button>
<button @click="showElements(div1)">Show<button>
<div v-if="div1">
<p>Hello</p>
</div>
However, nothing seems to happen upon clicking the buttons.