vuejs conditional wrapper

Question

In my nativescript-vue application I have a singleFile component called profileForm. I want to use that component in two ways, if the user is logged in I want to have that component as the slot of my layout component to edit profile. Otherwise I want is as a registration form.

I don't want to create an extra component for handling this. So in one case I would like to have my component wrapped in a tag so I can navigate to it, with Vue.$navigateTo, in another case I'd like to wrap it in a component. But the component has a tag in itself so in that case I don't want the anymore.

In django templates I would do something like this:

<template>
  <Page v-if="is_signup" actionBarHidden="true">
  <AppLayout v-else title="Profile">
  ...
  </AppLayout v-else>
  </Page v-if="is_signup">
</template>

But of course this would not work in vuejs. Is there any way to achieve this in vuejs?

I could create a new component and wrap this there like so:

<template>
  <Page v-if="is_signup" actionBarHidden="true">
    <ProfileForm/>
  </Page>
  <AppLayout v-else title="Profile">
    <ProfileForm/>
  </AppLayout>
</template>

But I'd rather not create a new component for this task.

I was hoping to get something like this:

<template>
  <template :is="is_signup?'Page':'AppLayout'" :v-bind="is_signup?{actionBarHidden:true}:{title:'Profile'}">
    ...
  </template>
</template>

Does nativescript-vue have such syntax?

With the way vue works. you can't nest the applayout within the conditional page... your second bit of code is the only way the layout would work that way. Since the page fails the `v-if` the renderer never enters the block: which would include the applayout. — Shawn Pacarar, Sep 14 '19 at 14:06
after your edit I remembered seeing this `:is` binding somewhere. I think it is discussed here... not much mention of it anywhere in the docs https://www.nativescript.org/blog/getting-your-route-on-with-nativescript-vue-episode-two — Shawn Pacarar, Sep 14 '19 at 14:21
My way would be to work with a boolean variable, say it `isLogin` and depending on route make it true or false. — Varit J Patel, Sep 14 '19 at 15:44
Maybe you can provide the code snippet where you think the error lies? What you want to do is possible in vue and described in a lot of resources - I cannot tell what exactly your problem is to help you any further — MarcRo, Sep 14 '19 at 15:57
@MarcRo This would be a simplified version of my problem: how Can I wrap the template of a component inside a tag based on a prop. so if the prop is true the template will be wrapped in a tag. otherwise it will be naked. This is not exactly my problem but if you tell me how to solve this I can solve that myself. — yukashima huksay, Sep 14 '19 at 16:04
@ShawnPacarar thank you so much for that link! It opened new doors to me:P — yukashima huksay, Sep 14 '19 at 16:05
@yukashimahuksay sounds like you might have it. looking at the `` dynamic component and the `v-if="" - v-else` directive is probably the right direction. — MarcRo, Sep 14 '19 at 16:10
@MarcRo can you post an answer that would make the template be `` if is_signup is true and `` otherwise? — yukashima huksay, Sep 14 '19 at 16:16

score 12 · Answer 1 · edited Jul 15 '22 at 04:51

12

This can be solved by using a generic component element:

<template>
    <component :is="is_signup ? 'Page' : 'AppLayout'" actionBarHidden="true">
    ...
   </component>
</template>

See https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components
Note that passing a prop not declared in the component (for instance, actionBarHidden being passed to AppLayout, which does not use it) has no effect and is completely safe.

This is an old question but I found myself in the same situation, so I came back to add this answer. Edit: @MarcRo already provided the same answer, somewhat hidden in a comment above.

edited Jul 15 '22 at 04:51

tony19

125,647
18
229
307

answered Sep 07 '20 at 10:05

pecus

351
3
8

1

I also done it this way, helps to avoid a lot of code duplication. Whats also cool you can also use normal html tags, so you can use 'div' als fallback – yvess Sep 25 '20 at 07:37

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

One way to do it:

I would go with a v-if / v-else logic if you have only two distinct but predefined options. Simply more semantic.

<template>
  <Page
    v-if="is_signup"
    :actionBarHidden="true"
  >
    <Label :text="'hello'" />
  </Page>
  <Label
    v-else
    :text="'hello'"
  />
</template>

<script>
import Label from '../components/Label.vue';
import Page from '../components/Page.vue';

export default {
  components: {
    Page,
    Label,
  },

  data() {
    return {
      is_signup: false, // you will have to find a way to set is_signup correctly
    };
  },
}
</script>

There are several other ways to achieve the same result; however without knowing more about the requirements I will just leave you with this first option :)

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 14 '19 at 16:44

MarcRo

2,434
1
9
24

1

I'm sorry for my lack of explanation in my comment. As you can see in my question, I'm aware of this solution, however, I don't actually have a Label tag, I can make a new component but I don't want to, in other words I don't want to write the text `` twice. – yukashima huksay Sep 14 '19 at 17:14
@yukashimahuksay As written, this is only the most simple solution for the problem you described. If you give us more concrete requirements we can help you further. You can also use the feature to nest components into other components. This also works with dynamic components, e.g. ``; then you could make the dynamic component your `` or alternatively a `` . – MarcRo Sep 14 '19 at 18:14
The problem is I guessed the solution to my problem and my guess was correct:)) So in fact I have included the answer to my question in my question itself:)) I don't know what to do now. I think this is a useful question so I don't want to delete it maybe I should edit it and post the solution as an answer instead. – yukashima huksay Sep 14 '19 at 18:41
The other thing was that after thinking of the solution I thought, is it also possible to have or nothing instead of or ? so I asked you that in the comments. – yukashima huksay Sep 14 '19 at 18:42
You can not entirely remove a component in Vue without also removing its children/nested components. – MarcRo Sep 14 '19 at 19:31
Don't do that, use the solution provided by @pecus - duplicating code like that is a big no-no and paves the road to maintainability hell. – René Roth Jan 03 '22 at 14:14

vuejs conditional wrapper

2 Answers2

One way to do it:

Linked