Skip to content

<component> with nested custom component doesn't work properly #217

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
SilentDepth opened this issue May 7, 2018 · 5 comments
Closed

<component> with nested custom component doesn't work properly #217

SilentDepth opened this issue May 7, 2018 · 5 comments

Comments

@SilentDepth
Copy link

Really confusing bug, at least for me.

Online demo: https://play.nativescript.org/?template=play-vue&id=cXD8qx

If I load CustomComponent via <component>, the tapping will not update the view (but console.log() works fine). If load it as a normal child component like <PageContent/>, or remove the <CustomComponent/>, everything back to normal.

When issue happens, NSVue log says something like:

[Vue warn]: Error in nextTick: "TypeError: undefined is not an object (evaluating 'e.$options')"

Or sometime:

[Vue warn]: Error in nextTick: "TypeError: undefined is not an object (evaluating 'n._transitionClasses')"

@rigor789
Copy link
Member

rigor789 commented May 7, 2018

Seems to be working on Android, but not on iOS. I checked the generated render functions, and they are identical, so the issue is somewhere else.

@ramsesmoreno
Copy link

I think this is related, in this example .vue file, the v-if is not working specifically in iOS using v1.3.2-rc.4. It works ok on Android any version and works ok in iOS and Android using version v1.3.1

<template>
  <FlexboxLayout flexDirection="column" width="100%" height="100%">
    <FlexboxLayout flexDirection="row" width="100%" height="90%">
      <AbsoluteLayout width="50%" height="100%" backgroundColor="#f00"/>
      <AbsoluteLayout ref="content0" v-if="shouldShow" width="50%" height="100%" backgroundColor="#0f0"/>
    </FlexboxLayout>
    <Button text="click" width="100%" height="10%" @tap="onClick"/>
    <Label :text="this.shouldShow" textAlignment="center"/>
  </FlexboxLayout>
</template>

<script>

  export default{
    components:{
    },
    data(){
      return{
        shouldShow:true,
      };
    },
    methods:{
      onClick:function(){
        this.shouldShow = !this.shouldShow;
        console.log(this.shouldShow);
      }
    }
  };
</script>

@ghost
Copy link

ghost commented Jun 16, 2018

I am also having some issues with nested components, but only if using the typescript .vue file format
If switching to js, it works. Very frustrating.
I can see -> CreateElement(comment)', but nothing is rendered. If I load the component separately, it works fine

rigor789 added a commit that referenced this issue Jun 21, 2018
rigor789 added a commit that referenced this issue Jun 21, 2018
@msaelices
Copy link

I've tested the 217.js sample app for testing this issue and it works both on Android and iOS, using the latest master branch, which is the 2.0.0-alpha.1

@nativescript-vue-bot
Copy link
Collaborator

We are locking this issue because it has been closed for more than 14 days.

If the issue comes up again please open a new issue with additional details.

@nativescript-vue nativescript-vue locked as resolved and limited conversation to collaborators Aug 16, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Development

No branches or pull requests

5 participants