Vue.js - 从一个组件切换到另一个组件

Question

I'm quite new to vue.js. I have a page that lists details of a list of people, with an 'Edit' button against each person. When I click the Edit button, I want to switch to another page which shows a form for editing the selected person's details.

I'm not sure what is the best way to do this. I'm using Bootstrap and Router in my solution.

Option 1 : I thought it would be straightforward to route to '/person/:id' when clicking the Edit button, but not sure how to do this from the click handler method.

Option 2 : Below is the main component, where I'm trying to switch between the two components 'PersonsList' and 'EditPersonData' upon receiving an event from either. PersonsList is emitting the event successfully, but I'm not sure how to listen to it here and switch to EditPesonData component.

Home.vue

 <template> <div class="home"> <h1 class='home-text'> {{message}} </h1> <component v-bind:is="component"/> </div> </template> <script> import PersonsList from '@/components/PersonsList' import EditPersonData from '@/components/EditPersonData' export default { name: 'Home', data() { return { message: 'Welcome to Person Details,': component, "PersonsList" } }: components, { PersonsList; EditPersonData } }; </script>

Any help would be very much appreciated.

Thanks

Answer 1

The best way would be to send the id as a param in the route /person/:id . To do this, you can append the id of each list item, for example:

<div v-for="(user,index) in userList" :key="index">
     <a :href="'/person/' + user.id">Edit</a>
</div>

Then, you would get it in the other component as this.$route.params.id in order to get more details about the user of this id.

Make sure you define the route in the router with the id param as follows: person/:id

UPDATE:

If you want to change the route on a click function:

<b-btn @click="editPerson(user.id)">Edit</b-btn>

And in the methods, add the function as follows:

editPerson(userId){
     this.$router.push({
          name: 'person', 
          params: { id: userId }
     });
}