The web app I'm working on has a log in page where it asks users to select which site they wish to use, this site selection is done as so:

<v-select v-if="step > 0" v-model="userId" label="Select Account" :items="accounts" item-text="owner.name" item-value="id" :rules="[rules.isRequired]" :disabled="step > 1" /> (The site names provided in the dropdown are saved in a mysql table called owners).

The task at hand is to make the name of the site they chose display on every page. To do this, I am aiming to put the name in the nav bar at the top, as so:

<v-toolbar-title class="d-flex text-center"> NAME_HERE </v-toolbar-title>

I currently cannot figure out how I would bring the site name that they chose and display it how I wish to do so, and would really appreciate the help.

sidenote: the login code is from a login.vue file and the name display part is in AppBar.vue.

CodePudding user response：

There are multiple ways to achieve your goal.

Pass value from the root component

You can store selected values from a user by using callback in login.vue. Callback user should be called when a user changes the site name, then pass values back to the main component (in this case might be App.vue).

But, This method is really ugly if you have 5 nested vue components, so you have to pass a callback function down through 5 components. So let talk about a next solution.

Vuex, the global store

You can store values from anywhere by anyone inside a state store. There is a library named Vuex. It allows you to save values that any component can access.

In this case, you can update the site name via login.vue then AppBar.vue access it on its own.

Read more about it here. https://vuex.vuejs.org/

However, Vuex kinda makes your app more complicated. Use it when there are no other ways you can think of.