Компонент prop не реагирует после первоначального маршрутизатора pu sh (VueJS) - PullRequest
Новая
       4

Компонент prop не реагирует после первоначального маршрутизатора pu sh (VueJS)

1 голос
/ 06 мая 2020

У меня есть несколько представлений / компонентов; Домашняя страница, ScrapeResults и Search. Чтобы помочь вам следить за происходящим, вот несколько фрагментов кода, имеющих отношение к моей проблеме.

фрагмент приложения. vue

<template>
    <v-app-bar>
        <Search @selected_card="scrape"/>
    </v-app-bar>

    <v-content>
        <v-container fluid style="width: 80%;">
            <router-view :card="card"></router-view> //card prop is in ScrapeResults.vue
        </v-container>
    </v-content>
</template>

<script>
    data() {
        return {
           card: {}
        }
    }
    methods: {
        scrape(card) { //card parameter value is from $emit event from Search
            if(this.$router.currentRoute.name != 'scrape-results') {
                this.$router.push({name: 'scrape-results', params: { card: card } });
            }
            else {
                this.card = card;
                console.log(this.card)
            }
        }
    }
</script>

фрагмент домашней страницы. vue

<template>
    <div id="home">
        <h1>Home</h1>
        <Search id="search" @selected_card="scrape"/>
    </div>
</template>

<script>
    methods: {
        scrape(card) { //card parameter value is from $emit event from Search
            this.$router.push({ name: 'scrape-results', params: { card: card } });
        }
    }
</script>

Фрагмент результатов анализа: 

<template>
    <div id="home">
        <h1>Scrape Results</h1>
        <p> {{card.name}} - {{card.set_name}} </p>
        <v-img :src="card.img_url"></v-img>
    </div>
</template>

<script>
    ...... //irrelevant stuff
    props: {
        card: Object
    },
    watch: {
        card() {
            console.log(this.card)
        }
    }
</script>

Пути в приложении:

  • / (Home)
  • / scrape-results (ScrapeResults)

Итак, как работает приложение, пользователь будет искать карточку (объект) и выбирать из отображаемого списка. После того, как пользователь выбирает карточку из отображаемого списка, он перенаправляется в представление результатов очистки. Все это прекрасно работает, когда выполняется из Дома. vue.

Моя проблема: если пользователь получал доступ к результатам очистки из домашней страницы. vue и все еще находился в представлении результатов очистки, если пользователь искал другую карту с помощью подключенного компонента поиска (в приложении bar) в приложении vue, то свойство карты в ScrapeResults. vue не обновляется. Странно то, что если я вручную перейду к результатам очистки, введя / scrape-results в адресной строке, ищу карту с помощью компонента «Поиск» на панели приложения, а затем опора карты обновится. Опора карты будет обновляться только в том случае, если я вручную получу доступ / очистку-результаты, а затем найду карту.

Я знаю, что все это звучит сбивающе с толку, поэтому вот клип, который я записал, демонстрирует, в чем моя проблема. Ссылка: https://www.youtube.com/watch?v=aO9qSTa9CCk&feature=youtu.be&hd=1

РЕДАКТИРОВАТЬ: определение маршрута ниже 

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home'
import ScrapeResults from '@/views/ScrapeResults'

Vue.use(VueRouter);

const router =  new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/scrape-results',
            name: 'scrape-results',
            component: ScrapeResults,
            props: true
        }
    ]
});

export default router;

1 Ответ

0 голосов
/ 07 мая 2020

Итак, вместо того, чтобы пытаться передать опору в режим просмотра маршрутизатора, я просто изменил путь ScrapeResults в моем маршрутизаторе. js на / scrape-results /: card_set /: card_name; оригинал был просто / scrape-results. Затем я просто вставил дополнительные параметры в $ router.pu sh

this.$router.push({name: 'scrape-results', params: { card: card, card_set: card.set_name, card_name: card.name } });
...