I'm attempting to design a feature in my application that enables a button to trigger the visibility of several other elements and automatically remove itself after being clicked. Below is the relevant HTML code:
<div id="app">
<button @click="reveal" v-if="!showlists">Start</button>
<ul v-if="showlists">
<list v-for="name in chosenNames" v-bind:name="name"></list>
</ul>
</div>
Here, the unsorted list should only be displayed when the variable "showlists" is set to true, while the button should disappear once "showlists" becomes true. The structure of my Vue app is as follows:
let app = new Vue({
el: "#app",
data: {
showlists: false,
chosenNames: [
{ text: "name1" },
{ text: "name2" },
{ text: "name3" },
]
},
methods: {
reveal: function() {
showlists = true;
}
}
})
Initially, the "showlists" variable is initialized as false, and the program operates as expected with the button visible and the list hidden. However, upon clicking the button, the function executes and changes "showlists" to true (this was verified during troubleshooting). Despite this, the DOM fails to update dynamically and retains its original state.
I apologize if this issue appears to be quite basic; I am relatively new to Vue and constantly striving to enhance my understanding :)
I would highly value any assistance provided.