Issue with vs-switch $refs.on and $refs.off

[lk77]

Your OS : Ubuntu 18.10 (Issue seems to be on mac os x)
Node.js version 11.10.1
Vuesax version 3.11.1
Browser version chrome 78
Which package manager did you use for the install? npm

Hello,

i have an issue with vs-switch :

Cannot read property 'clientWidth' of undefined

it seems related to $refs.on and $refs.off in mounted hook inside vs-switch.
Sometimes it's not defined

The data i have :

componentName	component at vsSwitch.vue
lifecycleHook	nextTick
propsData	{color: #ea5455, iconPack: feather, value: False, vsIconOff: icon-unlock, vsIconOn: icon-lock}

Name	Mac OS X
Version	10.15.1

name	Chrome
version	78.0.3904

thanks.

[iomariani]

I had the same issue, but instead with VsPrompt.

This happens because it tries to find find the button to change the click animation, but when nextTick happens the button does not exist anymore.

The issue is at

vuesax/src/components/vsButton/vsButton.vue

Lines 270 to 302 in 3f03427

	let btn = this.$refs.btn
	let xEvent = event.offsetX
	let yEvent = event.offsetY
	let radio = btn.clientWidth * 3
	this.time = btn.clientWidth / (btn.clientWidth + (this.is('border') || this.is('flat') ? 70 : 20))
	if(this.is('filled')){
	this.timeOpacity = this.time
	}
	if(event.srcElement ? event.srcElement != btn : false) {
	xEvent += event.target.offsetLeft
	yEvent += event.target.offsetTop
	}
	this.leftBackgorund = xEvent
	this.topBackgorund = yEvent
	this.radio = radio
	if(this.is('filled')){
	this.opacity = 0
	} else {
	this.opacity = 1
	}
	if(this.is('filled')){
	setTimeout( () => {
	this.time = this.timeOpacity = this.radio = 0
	this.opacity = 1
	this.isActive = false
	}, this.time * 1100)
	} else {
	setTimeout( () => {
	this.timeOpacity = .15
	}, this.time * 1100)
	}

This entire block should be wrapped with an if first

if (this.$refs.btn) {
 ...
}

[iomariani]

Seem it's also related to #611