CODEWITHSUNDEEP
vue.js
Vzupo
Vzupo

Reputation: 1478

Vue.js adding a toggle and method to a button

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>

Upvotes: 1

Views: 4275

Answers (3)

jogesh_pi
jogesh_pi

Reputation: 9782

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/

Upvotes: 0

Andrew Vasylchuk
Andrew Vasylchuk

Reputation: 4779

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>

Upvotes: 0

Puwka
Puwka

Reputation: 650

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>

Upvotes: 1

Related Questions