vue-js-toggle-button icon indicating copy to clipboard operation
vue-js-toggle-button copied to clipboard

Toggle button stuck on switch

Open TTraian opened this issue 5 years ago • 2 comments
trafficstars

Hello. After last update (1.3.3) if you have an code like in the example your button will be stuck. As i can see,it is because on (value) property there is no variable to watch and is a boolean value. Maybe someone have the same issue like me after update. I remove the (sync) property for this case and everything is working fine right now.

<toggle-button :value="false" color="#82C7EB" :sync="true" :labels="true"/>

TTraian avatar Jan 30 '20 14:01 TTraian

Hey, When using :sync="true" looks like you are telling the toggle-button component to watch for changes in the object you are passing to :value prop

Which in your case is just "false" and thats why nothing really happens when you click the button

Here is an exmaple

// HTML
<toggle-button :value="data_property" color="#82C7EB" :sync="true" :labels="true"  @change="changeDataProperty($event.value)" />


// VUE
changeDataProperty: function(event){

            (event) ?  this.data_property = true :  this.data_property = false  ;

        }

Aviglik91 avatar Feb 06 '20 15:02 Aviglik91

Hey, When using :sync="true" looks like you are telling the toggle-button component to watch for changes in the object you are passing to :value prop

Which in your case is just "false" and thats why nothing really happens when you click the button

Here is an exmaple

// HTML
<toggle-button :value="data_property" color="#82C7EB" :sync="true" :labels="true"  @change="changeDataProperty($event.value)" />


// VUE
changeDataProperty: function(event){

            (event) ?  this.data_property = true :  this.data_property = false  ;

        }

Hi. I mention that because in the Readme file the example is wrong, and I agree with you. But in the past I used the code wrong and it works very well. After the update 1.3.3, that bug was fixed and if you still use the example code, the one with :value="false" and :sync="true" your buttons will go crazy.

TTraian avatar Feb 10 '20 15:02 TTraian