[Vuejs]-Toggle between two colors vueJS

by

0👍

Try to remove this.alteredState = true; before condition block, and toggle between black and green by clicking on the button which changes also the alteredState value :

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
        <style>
            .main-header {
                color: #292c2e;
            }
        </style>
    </head>
    <body>
    <div id="app">
        <h1 class="main-header" v-bind:style="{color: clickedColor}">{{ message }}</h1>
        <button v-on:click="colorChange">Click me</button>
    </div>
    <script>
        var app = new Vue({
        el: '#app',
            data: {
                message: 'Hello Vue!',
                clickedColor: '',
                alteredState: false
            },
            methods: {
                colorChange: function() {
                    console.log(this.alteredState);
                 
                    if (this.alteredState ) {
                        this.clickedColor = 'green'
                        this.alteredState = false;
                    } else {
                        this.clickedColor = '#000'
                         this.alteredState = true;
                    }
                }
            }
        })
    </script>
    </body>
</html>

0👍

You set alteredState to true, and then immediately check to see if it’s true — so it’s always true.

There’s no reason for your alteredState variable at all; you can just toggle based on the current color:

colorChange: function() {
  if (this.clickedColor == 'green') {
    this.clickedColor = '';
  } else {
    this.clickedColor = 'green'
  }
}

But if you really wanted that alteredState var, you’d want to set it based on the toggle state, not set it true every time:

    colorChange: function() {
      if (this.alteredState) {
        this.clickedColor = 'green'
        this.alteredState = false;
      } else {
        this.clickedColor = ''
        this.alteredState = true;
      }
    }

Also be mindful of the difference between true (the boolean) and 'true' (the string).

0👍

I think @Boussadjra Brahim‘s answer is kinda’ OK, but I’d clean it up a bit, and eliminate the initial double-click-to-change-color problem.

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    clickedColor: 'red', // set the initial value; I used red, so you can see the different states
    alteredState: true
  },
  methods: {
    colorChange: function() {
      console.log(this.alteredState);

      if (this.alteredState) {
        this.clickedColor = 'green'
      } else {
        this.clickedColor = '#000'
      }
      // this is toggle function, so it's OK to
      // toggle the state every time the button is clicked
      this.alteredState = !this.alteredState
    }
  }
})
/* you don't need this CSS, as you set the color with :style */


/*.main-header {
    color: #292c2e;
*/
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id="app">
  <h1 class="main-header" :style="{color: clickedColor}">{{ message }}</h1>
  <button v-on:click="colorChange">Click me</button>
</div>

Hope this helped you! 🙂

0👍

The answer is late but will help other peoples to implement a perfect toggle button.

new Vue({
  el: '#app',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    labelEnableText: {
      type: String,
      default: 'On'
    },
    labelDisableText: {
      type: String,
      default: 'Off'
    },
    id: {
      type: String,
      default: 'primary'
    },
    defaultState: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentState: this.defaultState
    }
  },

  computed: {
    enableText() {
      return this.labelEnableText;
    },

    disableText() {
      return this.labelDisableText;
    },

    isActive() {
      return this.currentState;
    },

    checkedValue: {
      get() {
        return this.currentState
      },
      set(newValue) {
        console.log(newValue);
        this.currentState = newValue;
      }
    }
  }
});
.toggle__button {
    vertical-align: middle;
    user-select: none;
    cursor: pointer;
}
.toggle__button input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 1px;
    height: 1px;
}
.toggle__button .toggle__switch {
    display:inline-block;
    height:12px;
    border-radius:6px;
    width:40px;
    background: #BFCBD9;
    box-shadow: inset 0 0 1px #BFCBD9;
    position:relative;
    margin-left: 10px;
    transition: all .25s;
}

.toggle__button .toggle__switch::after, 
.toggle__button .toggle__switch::before {
    content: "";
    position: absolute;
    display: block;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    left: 0;
    top: -3px;
    transform: translateX(0);
    transition: all .25s cubic-bezier(.5, -.6, .5, 1.6);
}

.toggle__button .toggle__switch::after {
    background: #4D4D4D;
    box-shadow: 0 0 1px #666;
}
.toggle__button .toggle__switch::before {
    background: #4D4D4D;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
    opacity:0;
}

.active .toggle__switch {
    background: #adedcb;
    box-shadow: inset 0 0 1px #adedcb;
}

.active .toggle__switch::after,
.active .toggle__switch::before{
    transform:translateX(40px - 18px);
}

.active .toggle__switch::after {
    left: 23px;
    background: #53B883;
    box-shadow: 0 0 1px #53B883;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p><strong>Basic Example</strong></p>
  <label :for="id + '_button'" :class="{'active': isActive}" class="toggle__button">
    <span v-if="isActive" class="toggle__label" v-text="enableText"></span>
    <span v-if="! isActive" class="toggle__label" v-text="disableText"></span>

    <input type="checkbox" :disabled="disabled" :id="id + '_button'" v-model="checkedValue">
    <span class="toggle__switch"></span>
  </label>
</div>

Take a look for more details https://webomnizz.com/create-toggle-switch-button-with-vue-js/

Leave a comment