Creating an dropdown menu using a Vue instance

Question

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

tony19 · Accepted Answer · 2022-07-16 03:02:49Z

1

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

edited Jul 16, 2022 at 3:02

answered Mar 30, 2021 at 22:44

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Creating an dropdown menu using a Vue instance

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related