Home » vue » Change between open and close buttons in vue

Change between open and close buttons in vue

Posted by: admin November 26, 2021 Leave a comment

Questions:

I am new to Vue and trying to do the following functionality.

I have an open button(icon) in the navigation bar of the page. When it is clicked, it should be changed to a close icon and load a new template (within the same page). When we click on the close icon, it should again change to open icon and go back to the previous template.

Can someone help me!

Answers:

You may have to adapt it but here’s the idea

<div id="app">
  <v-app id="inspire">
    <div class="text-xs-center">
      <div>
        <v-btn outline @click="changeIcon" color="primary" dark>Accept
          <v-icon dark right>{{icon}}</v-icon>
        </v-btn>
      </div>
    </div>
  </v-app>
</div>
new Vue({
  el: '#app',
  data: {
      icon: "check_circle"
  },
    methods: {
        changeIcon() {
            this.icon = (this.icon === "check_circle" ? "block" : "check_circle")
        }
    }
})

DEMO : https://codepen.io/LENNY74/pen/qBRJXWZ