NativeScript Vue - Event not fired. #120
Comments
|
I couldn't even get the plugin to work. I am getting the error: Any ideas? I am on NS 4.2.0. |
|
@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. |
|
@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> |
|
Hello @atrunelle , I have updated to My <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> |
|
@atrunelle I even tried to use your component "as it" and it still not reach the console.log... |
|
@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 It's hard to tell what could be wrong without the full file/repo |
|
I am unable use <slide-container ref="appSlideContainer">
<!-- Slides -->
</slide-container >this.$refs.appSlideContainer.nativeView.nextSlide() |
Detailed exception |
|
I am unable to make this work with Nativescript Vue, currently getting this error: Do I need to install some kind of dependency for typescript? |
|
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. |
|
@Reached kind of a round about way to fix it, but I was able to get mine working by deleting the UPDATE
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I am trying to use
nativescript-slidewith Vue. The slider works as expected but I cannot find how to listen for the events.Is someone know how I have to write this to make
doSomethingfire ?The text was updated successfully, but these errors were encountered: