NativeScript Vue - Event not fired.

[monkeymonk]

I am trying to use nativescript-slide with Vue. The slider works as expected but I cannot find how to listen for the events.

<SlideContainer loop="true" height="100%" width="100%" @changed="doSomething">
    <!-- [...] -->
</SlideContainer>

Is someone know how I have to write this to make doSomething fire ?

[tralves]

I couldn't even get the plugin to work. I am getting the error:

ERROR in ../node_modules/nativescript-slider/slider-common.js
Module not found: Error: Can't resolve 'ui/core/proxy' in '/Users/tralves/code/ns-vue/test-slider/node_modules/nativescript-slider'

Any ideas? I am on NS 4.2.0.

[monkeymonk]

@tralves I am on NativeScript 4.2.2. I did nothing more than installing the dependency so I guess it should work... Hav you tried to clear and re-build the whole project ? With nativescript-cli, this is required.

[atrunelle]

@monkeymonk the event is firing for me. I recently created my project with nativescript-vue 2, and my version of Nativescript is 4.2.

Here is my code if it helps:

// app.js
Vue.registerElement('Slide', () => require('nativescript-slides').Slide);
Vue.registerElement('SlideContainer', () => require('nativescript-slides').SlideContainer);

//Component.vue
<template>
<Page>
  <SlideContainer id="slides" pageIndicators="true" @changed="onChange">
			<Slide class="slide-1">
				<Label text="This is Panel 1"  />
			</Slide>
			<Slide class="slide-2">
				<Label text="This is Panel 2"  />
			</Slide>
			<Slide class="slide-3">
				<Label text="This is Panel 3"  />
			</Slide>
			<Slide class="slide-4">
				<Label text="This is Panel 4"  />
			</Slide>
			<Slide class="slide-5">
				<Label text="This is Panel 5"  />
			</Slide>
	</SlideContainer>
</Page>
</template>

<script>
export default {
  methods: {
    onChange() {
      console.log('onChange');
    }
  },
}
</script>

<style lang="scss">
.slide-1{
  background-color: darkslateblue;
}

.slide-2{
  background-color: darkcyan;
}
.slide-3{
  background-color: darkgreen;
}

.slide-4{
  background-color: darkgoldenrod;
}
.slide-5{
  background-color: darkslategray;
}
Label{
  text-align: center;
  width: 100%;
  font-size: 35;
  margin-top: 35;
}
</style>

[monkeymonk]

Hello @atrunelle , I have updated to nativescript-vue@^2.0.0 but cannot make it works as expected.
The console.log is never reached...

My template look like this:

<template>
    <Page ref="page" :class="pageClasses()" actionBarHidden="true" backgroundSpanUnderStatusBar="true">
        <StackLayout class="wrapper">
            <AbsoluteLayout>
                <ScrollView class="page-content" top="0" height="100%" width="100%" v-if="page">
                    <StackLayout>
                        <AbsoluteLayout class="carousel" v-if="slider.length">
                            <SlideContainer ref="slider" class="carousel-slides" loop="true" top="0" height="100%" width="100%" pageIndicators="true" @changed="updateIndicators">
                                <Slide :class="'carousel-slide slide-' + article.id"
                                       v-for="article in slider"
                                       @tap="openArticle(article)"
                                       :key="article.id"
                                >
                                    <AbsoluteLayout class="article-thumb"
                                                    v-bind:key="article.id"
                                                    :style="getBackgroundImage(article.meta)"
                                    >
                                        <AbsoluteLayout class="article-overlay"></AbsoluteLayout>
                                        <FlexboxLayout class="article-title" justifyContent="space-around" top="0" height="100%" width="100%">
                                            <Label :text="article.title" textWrap="true" alignSelf="flex-end"></Label>
                                        </FlexboxLayout>
                                    </AbsoluteLayout>
                                </Slide>
                            </SlideContainer>
                        </AbsoluteLayout>
                    </StackLayout>
                </ScrollView>

                <GridLayout class="action-bar" columns="50,*,50" top="0" width="100%">
                    <!--// ... //-->
                </GridLayout>
            </AbsoluteLayout>
        </StackLayout>
    </Page>
</template>

[monkeymonk]

@atrunelle I even tried to use your component "as it" and it still not reach the console.log...

[atrunelle]

@monkeymonk I tried again and I can still reach the console.log, even with your code (also I removed all the dynamic data). Are all of your slides displayed properly? Might be something in your for loop as I replaced it with static component to test (I kept the same components though).

FYI, realised I forgot the <Page> component in my example above so added it back.

It's hard to tell what could be wrong without the full file/repo

[saikksub]

I am unable use SlideContainers methods. I am getting TypeError: Cannot read property 'index' of undefined.

<slide-container ref="appSlideContainer">
   <!-- Slides -->
</slide-container >

this.$refs.appSlideContainer.nativeView.nextSlide()

[saikksub]

I am unable use SlideContainers methods. I am getting TypeError: Cannot read property 'index' of undefined.

<slide-container ref="appSlideContainer">
   <!-- Slides -->
</slide-container >

this.$refs.appSlideContainer.nativeView.nextSlide()

Detailed exception

System.err: java.lang.RuntimeException: Unable to start activity ComponentInfo{com.saikksub.photoid/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: 
System.err: Calling js method onCreate failed
System.err: 
System.err: TypeError: Cannot read property 'index' of undefined
System.err: File: "file:///data/data/com.saikksub.photoid/files/app/vendor.js, line: 29300, column: 6
System.err: 
System.err: StackTrace: 
System.err:     Frame: function:'SlideContainer.triggerCancelEvent', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 24801, column: 41
System.err:     Frame: function:'SlideContainer.nextSlide', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 24415, column: 12
System.err:     Frame: function:'mounted', file:'file:///data/data/com.saikksub.photoid/files/app/bundle.js', line: 253, column: 57
System.err:     Frame: function:'callHook', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 30351, column: 21
System.err:     Frame: function:'insert', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 37548, column: 7
System.err:     Frame: function:'invokeInsertHook', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 30933, column: 28
System.err:     Frame: function:'patch', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 31158, column: 5
System.err:     Frame: function:'Vue._update', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 30100, column: 19
System.err:     Frame: function:'updateComponent', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 30212, column: 10
System.err:     Frame: function:'get', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 29295, column: 25
System.err:     Frame: function:'Watcher', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 29282, column: 45
System.err:     Frame: function:'mountComponent', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 30218, column: 3
System.err:     Frame: function:'push.../node_modules/nativescript-vue/dist/index.js.Vue.$mount', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 38553, column: 10
System.err:     Frame: function:'', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 38569, column: 10
System.err:     Frame: function:'Observable.notify', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 43034, column: 15
System.err:     Frame: function:'notifyLaunch', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 64979, column: 15
System.err:     Frame: function:'ActivityCallbacksImplementation.setActivityContent', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 64910, column: 20
System.err:     Frame: function:'ActivityCallbacksImplementation.onCreate', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 64726, column: 10
System.err:     Frame: function:'NativeScriptActivity.onCreate', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 62079, column: 21
System.err: 
System.err:     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2946)
System.err:     at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3081)
System.err:     at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:78)
System.err:     at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:108)
System.err:     at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:68)
System.err:     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1838)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:106)
System.err:     at android.os.Looper.loop(Looper.java:193)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:6715)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:911)
System.err: Caused by: com.tns.NativeScriptException: 
System.err: Calling js method onCreate failed
System.err: 
System.err: TypeError: Cannot read property 'index' of undefined
System.err: File: "file:///data/data/com.saikksub.photoid/files/app/vendor.js, line: 29300, column: 6
System.err: 
System.err: StackTrace: 
System.err:     Frame: function:'SlideContainer.triggerCancelEvent', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 24801, column: 41
System.err:     Frame: function:'SlideContainer.nextSlide', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 24415, column: 12
System.err:     Frame: function:'mounted', file:'file:///data/data/com.saikksub.photoid/files/app/bundle.js', line: 253, column: 57
System.err:     Frame: function:'callHook', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 30351, column: 21
System.err:     Frame: function:'insert', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 37548, column: 7
System.err:     Frame: function:'invokeInsertHook', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 30933, column: 28
System.err:     Frame: function:'patch', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 31158, column: 5
System.err:     Frame: function:'Vue._update', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 30100, column: 19
System.err:     Frame: function:'updateComponent', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 30212, column: 10
System.err:     Frame: function:'get', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 29295, column: 25
System.err:     Frame: function:'Watcher', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 29282, column: 45
System.err:     Frame: function:'mountComponent', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 30218, column: 3
System.err:     Frame: function:'push.../node_modules/nativescript-vue/dist/index.js.Vue.$mount', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 38553, column: 10
System.err:     Frame: function:'', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 38569, column: 10
System.err:     Frame: function:'Observable.notify', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 43034, column: 15
System.err:     Frame: function:'notifyLaunch', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 64979, column: 15
System.err:     Frame: function:'ActivityCallbacksImplementation.setActivityContent', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 64910, column: 20
System.err:     Frame: function:'ActivityCallbacksImplementation.onCreate', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 64726, column: 10
System.err:     Frame: function:'NativeScriptActivity.onCreate', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 62079, column: 21
System.err: 
System.err:     at com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1116)
System.err:     at com.tns.Runtime.callJSMethodImpl(Runtime.java:996)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:983)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:967)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:959)
System.err:     at com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:18)
System.err:     at android.app.Activity.performCreate(Activity.java:7136)
System.err:     at android.app.Activity.performCreate(Activity.java:7127)
System.err:     at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1271)
System.err:     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2926)

[Reached]

I am unable to make this work with Nativescript Vue, currently getting this error:

file:///app/vendor.js:303:3148: JS ERROR Error: Module build failed (from ../node_modules/ts-loader/index.js):
Error: Cannot find module 'typescript'

Do I need to install some kind of dependency for typescript?

[Reached]

So to anyone else struggling with this error, I went into the tsconfig.json of nativescript-slides (inside node_modules) and turned off, which seems to have fixed the error. Hardly a solution, but I will make a fork of this project for anyone interested.

"noEmitHelpers": false,
"noEmitOnError": false,

[darrenkhouston]

@Reached kind of a round about way to fix it, but I was able to get mine working by deleting the nativescript-slides.ts file from the node_modules/nativescript-slides directory, I was able to register the component in Vue and it works for me. Not ideal, but maybe something that can work for you too.

UPDATE
I was actually able to use the full path on the import and leave the plugin alone without messing with the plugin files. Better option so that way if I need to reinstall the node modules, shouldn't be any issues having to go back in every time and remove the file.

require('../node_modules/nativescript-slides/nativescript-slides.js') instead of just
require('nativescript-slides')