Creating an dropdown menu using a Vue instance

I switched from React to Vue and for me there are some incomprehensible nuances I want to create a drop-down menu, but I have some incomprehensible things related to this who is familiar with React knows that you can create a certain property with a boolean value inside a state or using hooks then when clicking on the buttons, use setState and manage with it,

I understand that you can implement something like this in Vue JS, but I am confused by one question, how can you create a certain property in Vue JS? is it possible to instantiate by type let app = new Vue({el: '#app',}); for each component? Because I don’t understand how to create a property for example showDropDown without using new Vue ({})?

My code at the moment looks like this

<template>
    <div>
      <button class="arrow_down dropbtn">
        Read More
        <img src="arrow-down.png" alt="arrow-down">
      </button>
      <div id="myDropdown" class="dropdown-content">
        <a href="#"><li>Gagging</li></a>
        <a href="#"><li>Multiple BJs</li></a>
        <a href="#"><li>Deep Throat</li></a>
      </div>
    </div>
</template>

<style scoped>
   .dropdown-content {
     display: none;
   }
</style>

<script>
  export default {
    name: "ClosePage",
  }
</script>

I think the question is clear, I want to know how, when clicking on a button with an arrow_down class, to show a drop-down menu and, in the same way, when clicking again, close

Answer

Using the Options API, you can create local reactive state in Vue components by declaring them in data:

<script>
export default {
  data() {
    return {
      showDropDown: false
    }
  }
}
</script>

Use that state in your template to conditionally show an element with v-if:

<div id="myDropdown" class="dropdown-content" v-if="showDropDown">
 ...
</div>

Use v-on to add a click-handler to the button that toggles the dropdown state:

<button @click="showDropDown = !showDropDown">Read More</button>

demo

Advertisement

Answer