Child component using parent component data to re-direct

Question

I currently have a website/app that displays "FeatureCard" (components) onto a "Grid" component.

The feature cards have all the basic props to pass to the parent (Grid) component, so that data can be grabbed and a v-for used to create as many "featureCards" as possible.

That is all fine and working.

The issue comes when I want a title of a Feature card to link to its on slug-route.

Here is a snippet of my "FeatureCard" component -

<div class="card-content">
        <div class="row-1">
            <!-- <h4 class="bold">{{ resourceTitle }}</h4> -->

            <router-link :to="{ name: 'FigmaFind', params: {resource_slug: this.slug} }"><h4 class="bold">{{ resourceTitle }}</h4></router-link>
            <button class="price"><h6 class="bold">{{ resourcePrice }}</h6></button>
        </div>
        <div class="row-2">
            <a :href=creatorProfile target="_blank" >
                <img  :src="creatorImage">
            </a>

            <a :href=creatorProfile target="_blank" >
                <p>By <strong>{{ creatorsName }}</strong></p>
            </a>

        </div>
        <div class="row-3">
            <a :href="downloadLink" class="btn main" target="_blank" >
                <p class="light semibold" for="info" >Download Resource</p>
            </a>
            <a :href="resourceOriginalLink" class="btn icon" target="_blank">
                <p class="material-icons light md-18">info</p>
            </a>
        </div>

    </div>

As you can see, in "row-1" I have tried including a router-link, but obviously it doesn't work as it has not yet recieved the data for "this.slug" but essentially, that is where I want a user to click this, and be redirected to "website.com/selected-item-1"

My issue is, I do not pull the "slug" data in, until it is rendered onto the Grid component. So, until then I am not sure how to reference it for later use, I referenced the titles as "resource title" or links as ":href="resourceOriginalLink"" but no idea how to do it for a router item. I could just use ":href="resourceOriginalLink"" but I don't know how I would pass the route-info through...

any ideas?

UPDATE

So, I figured it out. It may be the wrong way to do it, or there may be an easier way. But here is what I have done.

I passed the data "slug" as a prop to my child component (featureCard). I then set slug: this.resourceSlug in my data. Then within my title section I simply set <router-link :to="{ name: 'FigmaFind', params: { resource_slug: this.slug }}"><h4 class="bold">{{ resourceTitle }}</h4></router-link>

And, it seems to be working!!

Obviously, if there is a better way please, someone let me know.

If you're not manipulating this.slug in the child, you don't need a data item. Just use the prop. — Roy J
Oh ok so, i don't need to set it as a data item, I can just use "this.slug" and use it directly from my props? — KJParker
@KJParker Correct. No need to clutter your data, when props are already available. — Kordonme
Also, you should create an answer with your update, so that the question is answered. — Kordonme

KJParker KJParker · Accepted Answer · 2018-12-10T14:11:37

UPDATE

So, I figured it out. It may be the wrong way to do it, or there may be an easier way. But here is what I have done.

I passed the data "slug" as a prop to my child component (featureCard). I then set slug: this.resourceSlug in my data. Then within my title section I simply set {{ resourceTitle }}

And, it seems to be working!!

Obviously, if there is a better way please, someone let me know.

Child component using parent component data to re-direct

1 Answers