Switching between components in Vue.js

Question

Switching between components in Vue.js

I am a beginner with vue.js and I have encountered a challenge. On my page, I display a list of people with an 'Edit' button next to each person's details. My goal is to switch to another page when the Edit button is clicked, where I can edit the selected person's information.

Currently, I am using Bootstrap and Router in my solution but I'm unsure about the best approach to achieve this. I am considering two options:

Option 1: One idea is to route to '/person/:id' upon clicking the Edit button, but I am struggling with implementing this functionality within the click handler method.

Option 2: In the main component below, named Home.vue, I am attempting to toggle between two components - 'PersonsList' and 'EditPersonData' based on events emitted by PersonsList component. Although PersonsList successfully emits the event, I am uncertain about how to listen for it and switch to the EditPesonData component.

Any assistance you could offer would be greatly appreciated.

Thank you

javascript vue.js

Answer 1

Answer №1

To efficiently retrieve user details, it is recommended to pass the user's identifier as a parameter in the route URL, such as /person/:id. To implement this, you can dynamically append the id of each user item like this:

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

Then, within another component, access this id value using this.$route.params.id to fetch additional information related to that particular user.

Ensure that the route in your router configuration includes the id parameter, structured as: person/:id

UPDATE :

If there is a need to modify the route upon a button click event:

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

Add the following method in your script section to handle the edit function:

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

Answer 2

To efficiently retrieve user details, it is recommended to pass the user's identifier as a parameter in the route URL, such as /person/:id. To implement this, you can dynamically append the id of each user item like this:

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

Then, within another component, access this id value using this.$route.params.id to fetch additional information related to that particular user.

Ensure that the route in your router configuration includes the id parameter, structured as: person/:id

UPDATE :

If there is a need to modify the route upon a button click event:

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

Add the following method in your script section to handle the edit function:

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

Switching between components in Vue.js

Answer №1

Similar questions

Utilizing VUETIFY DataTable: Implementing v-if in table header to conceal specific columns from users

Exploring the depths of Vue.js routing through nesting

Having trouble displaying Json data on an HTML page?

Issue with React Material-UI drawer not functioning properly when invoking a child component function from the parent

Use Axios in Vue seamlessly without any need for installation

Integrate a resizable sidebar on the webpage's right side that dynamically adjusts the layout

Issue with unrecognized expression in JQuery when processing Ajax response

When traversing across different child elements, the MouseEvent.offsetX/Y values get reset to 0

Easily simulate lifecycle hooks with vue-test-utils

Is there a counterpart to ES6 "Sets" in TypeScript?

Ensure that the JSON object exists before saving it to local storage

The function you are trying to access does not exist in this.props

Is it possible to iterate through div elements using .each while incorporating .append within an AJAX call?

Omit a certain td element from the querySelectorAll results

What could be preventing this bootstrap carousel slider from transitioning smoothly?

Changing the 'null' string to null in JavaScript

Fulfill the promise once all map requests have been completed

The request to localhost resulted in a 404 error, indicating that the resource was not found

Creating mutual reactivity between two inputs in Vue.js

Importing JSON data into JavaScript