R
R
Rufix2020-08-12 17:31:22
Vue.js
Rufix, 2020-08-12 17:31:22

How to keep props on page reload?

Hello. There is a page with vacancies and a json file in which they are stored.
5f33fc6f155b5216185228.png
I output all the vacancies from the json file in a cycle and for each I set a router-link with the transfer of the props of this vacancy. Inside the component, I accept these props and output data - everything is fine. But when the page is reloaded, it is empty, there is no data. It's understandable why, since we haven't passed any props, but how can we get rid of this problem?

Code with a list of vacancies:

<router-link
                        :to="{ name: 'Vacancy', params: { vacancyID: item.id, vacancy: item } }"
                        class="vacancies-item flex items-center"
                        v-for="item in vacancies"
                        :key="item.id"
                    >
                        <div class="vacancies-info w-full flex items-center justify-between">
                            <span class="vacancies-title w-2/5">{{ item.title }}</span>
                            <span class="vacancies-region w-1/4">
                                {{ item.region.country }},
                                {{ item.region.city }}
                            </span>
                            <span class="vacancies-salary w-1/4">{{ item.salaryGap }}</span>
                        </div>
                        <font-awesome-icon class="vacancies-button" icon="long-arrow-alt-right" />
                    </router-link>


Before reboot:
5f33fd855e36a493743388.png

After:
5f33fd9737a8c639471857.png

Answer the question

In order to leave comments, you need to log in

1 answer(s)
E
Edheldor, 2020-08-12
@Edheldor

I see two options:

  1. In the created hook of the component, take the sent props and shove them somewhere in the store. In the same place (in created), implement the logic that if there are no props, but there is information in the store, then pull the data from the store and show it in the component. With a simple reload of the page, it will help to show the same vacancy as it was before the reload
  2. Or in the same created hook of the component, with empty props, just redirect back to the page with the list of vacancies

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question