Vue.js adding a toggle and method to a button

Question

I have a button that should toggle and also call a method. How do I achieve this? Seems like it can be only one or the other.

new Vue({
  el: "#app",
  data: {
    iExist:false,
    iDoNotExist: true,
  },
  methods: {
    iSignedUpforThis: function(){
      console.log("step X");
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p v-show="iExist"> i EXISTS </p>
  <p v-show="iDoNotExist"> 
    <strong> You are not found: </strong>
    <form >
      First name:<br>
      <input type="text" name="firstname" value="Mickey">
      <br>
      Last name:<br>
      <input type="text" name="lastname" value="Mouse">
      <br><br>
    </form> 
  <BUTTON v-on:click="iExists = iDoNotExist">
    TOGGLE MY EXISTENCE
  </BUTTON>
</div>

Andrew Vasylchuk · Accepted Answer · 2019-08-15 16:36:42Z

1

Move iExists = iDoNotExist to a method:

methods: {
  iSignedUpforThis: function(){
    this.iExist = this.iDoNotExist
    console.log("step X");
  }
}

<button v-on:click="iSignedUpForThis">
 TOGGLE MY EXISTENCE
</button>

edited Aug 15, 2019 at 16:36

Andrew Vasylchuk

4,7792 gold badges14 silver badges31 bronze badges

answered Aug 15, 2019 at 14:56

Puwka

6505 silver badges13 bronze badges

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

2 Comments

Vzupo Over a year ago

the form doesn't hide though---only text changes?

Vzupo Over a year ago

it doesn't hide the form

Andrew Vasylchuk · Accepted Answer · 2019-08-15 16:38:41Z

First off to accomplish your desired result you need only one Boolean variable. Then in your method just switch between true and false. Also you have an invalid markup - there is closing tap p but no closing. That's why your example does not work.

Notice: it's bad idea to nest form tag inside p tag, so use div instead. It's considered a good practice to associate your input with it's label using label tag. Also there is shortcut for v-on:click - @click. data should be an function that returns an object, this will prevent . multiple instance to share the same object.

If you follow above recommendations you will make your code much clear and bug-less.

new Vue({
  el: '#app',
  data: {
    isExist: false,
  },
  methods: {
    method() {
      this.isExist = !this.isExist
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-show="isExist">I exist</div>
  <div v-show="!isExist">
    <strong>You are not found:</strong>
    <form>
      <label>First name:<br>
        <input type="text" name="firstname" value="Mickey">
      </label>
      <br>
      <label>Last name:<br>
        <input type="text" name="lastname" value="Mouse">
      </label>
    </form>
  </div>
  <button @click="method">Toggle</button>
</div>

jogesh_pi · Accepted Answer · 2020-04-09 07:55:27Z

It might be late but I am sure it will help others. Create a component ToggleButton.js and paste the below codes.

<template>
    <label for="toggle_button">
        <span v-if="isActive" class="toggle__label">On</span>
        <span v-if="! isActive" class="toggle__label">Off</span>

        <input type="checkbox" id="toggle_button" v-model="checkedValue">
        <span class="toggle__switch"></span>
    </label>
</template>
<script>
export default {
    data() {
        return {
            currentState: false
        }
    },

    computed: {
        isActive() {
            return this.currentState;
        },

        checkedValue: {
            get() {
                return this.defaultState
            },
            set(newValue) {
                this.currentState = newValue;
            }
        }
    }
}
</script>

Take a look at the article to learn more https://webomnizz.com/create-toggle-switch-button-with-vue-js/

Collectives™ on Stack Overflow

Vue.js adding a toggle and method to a button

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related