Conditional passing down props to child components

So, I’m trying to pass a prop like “title” based on a computed property. I’ve tried doing it like the class syntax in vue docs is doing it: :propname="{titleA:isHomepage, titleB: !isHomepage}"
I’ve computed the isHomepage based on an internal data in the binder.
I’m trying to avoid template v-if v-else.
What am I doing wrong ?

You still haven’t explained what your problem is, so it’s hard to say what you are doing wrong. For that, I would have to understand what you want to happen and what is actually happening that you dont want.

<my-comp-name ref="batman"
    :context="context"
    :title="title">
</my-comp-name>

and my binder:

data() {
    title: null,
    location: 'homepage',
    ...
},
computed: {
    isHomepage () 
        return (this.location=='homepage');
}

So basically, I want to pass the title prop to my-comp-name dynamically, when isHomepage is true to get some string, when is false to get another.

I’m trying this:

<my-comp-name 
    ref="batman"
    :title="{'you're on the homepage' :isHomepage, 
             'you're wandering in the desert': !isHomepage}">
</my-comp-name>

I’ve seen this done to :class property, but it’s a known fact that vue merges that internally with class attribute so maybe it can’t be done on custom props ?!

Thanks, now it’s clear.

I would use a simple ternary:

<my-comp-name 
    ref="batman"
    :title="isHomepage? 'you're on the homepage' : 'you're wandering in the desert'">
</my-comp-name>

You could also move that to a computed prop as well.

3 Likes

Interesting. How you you do to not pass the prop at all based on a specific condition. Not an empty value, but avoid sending the entire prop. Like isHomePage? title='you're on the homepage': null

<my-comp-name 
    ref="batman"
    :title="isHomepage? 'you're on the homepage' : undefined">
</my-comp-name>
1 Like