I need help with implementing a feature where upon clicking the edit button in a row, all the details from that particular row should be passed to a form component. I want to populate the form fields with default values from the parameters provided. Can anyone guide me on how to achieve this?
----------inside table component------------------
edit_row(id){
// alert("deleting row " + id);
var d_fname = this.users[id].fname;
var d_lname = this.users[id].lname;
var d_tech = this.users[id].tech;
this.$router.push({name: 'form/', params: {d_fname, d_lname, d_tech}});
// this.$router.push({name:'/form1', params:{d_fname, d_lname, d_tech}});
}
----------------inside form component------------------------
<template>
<form id="form">
<h4>Personal Information</h4>
<br />
<input type="text" placeholder="First Name" v-model="fname" />
<p>{{user_info}}</p>
<br />
<input type="text" placeholder="Last Name" v-model="lname" />
<br />
<input type="text" placeholder="Technologies" v-model="tech" />
<br />
<button type="button" value="submit" @click="submit_info()">Submit</button>
</form>
</template>
<script>
export default {
name: "form1",
props:["d_fname", "d_lname", "d_tech"],
data() {
return {
fname: "",
lname: "",
tech: ""
};
}
}