Question

我目前有一个网站/应用程序，在“网格”组件上显示“ FeatureCard”（组件）。

功能卡具有传递给父级（网格）组件的所有基本道具，因此可以获取数据，并使用v-for来创建尽可能多的“功能卡”。

这很好并且可以正常工作。

当我希望功能卡的标题链接到它的条形路由时，就会出现问题。

这是我的“ FeatureCard”组件的摘要-

<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>

如您所见，在“第1行”中，我尝试包括一个路由器链接，但是显然它不起作用，因为它尚未接收到“ this.slug”的数据，但是从本质上讲，那是我希望用户单击它，然后将其重定向到“ website.com/selected-item-1”

我的问题是，在将“段状”数据呈现到Grid组件之前，不要将其拖入。因此，在此之前，我不确定如何引用它以备后用，我将标题称为“资源标题”或将链接称为“：href =“ resourceOriginalLink””，但不知道如何为路由器物品使用它。我可以只使用“：href =” resourceOriginalLink“”，但我不知道如何将路由信息通过...

有什么想法吗？

更新

所以，我知道了。这样做可能是错误的方法，或者可能有更简单的方法。但是，这就是我所做的。

我将数据“ slug”作为道具传递给了我的子组件（featureCard）。然后，在数据中设置slug: this.resourceSlug。然后在标题部分中，我只需设置<router-link :to="{ name: 'FigmaFind', params: { resource_slug: this.slug }}"><h4 class="bold">{{ resourceTitle }}</h4></router-link>

而且，它似乎正在工作！

很显然，如果有更好的方法，请让我知道。

Answer 1

更新

所以，我知道了。这样做可能是错误的方法，或者可能有更简单的方法。但是，这就是我所做的。

我将数据“ slug”作为道具传递给了我的子组件（featureCard）。然后，我设置数据段塞：this.resourceSlug。然后在标题部分中，我只需设置{{resourceTitle}}

而且，它似乎正在工作！

很显然，如果有更好的方法，请让我知道。

子组件使用父组件数据来重定向

1 个答案: