Дочерний компонент, использующий данные родительского компонента для перенаправления - PullRequest
Новая
       7

Дочерний компонент, использующий данные родительского компонента для перенаправления

0 голосов
/ 03 декабря 2018

В настоящее время у меня есть веб-сайт / приложение, которое отображает «FeatureCard» (компоненты) на компоненте «Grid».

На функциональных картах есть все основные реквизиты для передачи родительскому компоненту (Grid), поэтомуэти данные могут быть получены и v-for используется для создания как можно большего количества "FeatureCards".

Это все нормально и работает.

Проблема возникает, когда я хочу названиеФункциональная карта для привязки к ней на slug-route.

Вот фрагмент моего компонента "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>

Как видите, в "row-1" у меня естьпопытался включить ссылку на маршрутизатор, но, очевидно, он не работает, так как он еще не получил данные для «this.slug», но, по сути, именно здесь я хочу, чтобы пользователь щелкнул это и был перенаправлен на сайт website.com/ selected-item-1 "

Моя проблема в том, что я не извлекаю данные" slug ", пока они не будут отображены в компоненте Grid.Поэтому до тех пор, пока я не уверен, как ссылаться на него для последующего использования, я ссылался на заголовки как «заголовок ресурса» или ссылки как «: href =« resourceOriginalLink »», но не представлял, как это сделать для элемента маршрутизатора.Я мог бы просто использовать ": href =" resourceOriginalLink "", но я не знаю, как бы я передавал информацию о маршруте через ...

любые идеи?

ОБНОВЛЕНИЕ

Итак, я понял это.Это может быть неправильный способ сделать это, или может быть более простой способ.Но вот что я сделал.

Я передал «кусок данных» в качестве опоры своему дочернему компоненту (featureCard).Затем я установил slug: this.resourceSlug в моих данных.Затем в разделе заголовка я просто установил <router-link :to="{ name: 'FigmaFind', params: { resource_slug: this.slug }}"><h4 class="bold">{{ resourceTitle }}</h4></router-link>

И, похоже, он работает !!

Очевидно, что, если есть лучший способ, пожалуйста, кто-нибудь, дайте мне знать.

1 Ответ

0 голосов
/ 10 декабря 2018

ОБНОВЛЕНИЕ

Итак, я понял это.Это может быть неправильный способ сделать это, или может быть более простой способ.Но вот что я сделал.

Я передал данные «слаг» как опору моему дочернему компоненту (featureCard).Затем я устанавливаю slug: this.resourceSlug в моих данных.Затем в разделе заголовка я просто установил {{resourceTitle}}

И, похоже, он работает !!

Очевидно, что, если есть лучший способ, пожалуйста, кто-нибудь, дайте мне знать.

...