v-on events are not working

[dkrasov]

Hi!

I'm using your component, and I've noticed that v-on events (nor @change) are not working with your component, so I'm using watchers for my properties bound to switches.

The events support would be great improvement IMO.

[b4dnewz]

@dmitriymarley
you should use @input is not documented but you can find it in code

[DulanHewage]

[Vue warn]: Error in event handler for "input": "ReferenceError: array is not defined"

found in

---> at node_modules\vue-switches\src\switches.vue
at src\components\home.vue
at src\App.vue

help? I just wanna add an event listener

[b4dnewz]

@Dulan666 ensure that your "array" property which could possibly be in data or computed actually exists.. read the error message: array is not defined

[tophat1986]

@dkrasov Using emitters is needed because this is a component that must announce that an action is happening to other components. It's pretty easy to then "listen" to this data emitted and then perform whatever method or action you need. You can see example and setup here:

https://stackoverflow.com/questions/40300634/emit-an-event-from-child-to-parent-in-vue-js-es6-syntax

[antonioreyna]

how can i sent the current status and also an identifier?

@input="setStatus(id, isOn)"

for example?

[b4dnewz]

@antonioreyna you can use the $event keyword which contains the original event or in this case the updated value (i guess)

is that what you are looking for?

[antonioreyna]

@dkrasov yes! now i get my id and the value, but then the switch does not animate to the true or false value it keeps on OFF

[antonioreyna]

this is my switch code:

switches(color="green", :value="servicio.realizado",  :emit-on-mount="false", :type-bold="true", @input="setRealizado(servicio.id, $event)")

then on my method just:

setRealizado: function(id, event) {
            console.log('id', id);
            console.log('val', event);
}

[b4dnewz]

use v-model instead of v-value, otherwise you need to update it by yourself

[antonioreyna]

the thing is that my v-model in this case is a list of dates so if the date is null then the switch is off and if it is a date the switch is on, if i set it v-model it changes my date to true or false, can you tell me how do i update it manually then in my method?

thank you so much for your help

[b4dnewz]

setRealizado: function(id, event) {
            console.log('id', id);
            console.log('val', event);
            this.servicio.realizado = event
}

this in case event is the boolean switch value, to explain it a little bit, the v-value determine the "state" of the switch same as a normal checked attribute on a checkbox html input, when you toggle it the switch component react to its changes

[antonioreyna]

got it! i had to create a new array for my switches v-model but now its working thank you so much!

[b4dnewz]

ningún problema amigo

[abdullah-336]

Hi!
@change is not working during the switching please resolve this issue. Thanks