1

I am implementing a function where a user clicks on the edit button(present inside a row) all the details from that row should get passed to form component where I should get default values of these fields from the parameters. I'm not sure how to implement this... Can anyone suggest a solution?

----------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: ""
    };
  }
}

1 Answer 1

2

You need to pass parameters in params object as key values and also need to set props as true on route declaration.

{path: "form/", name:"form", component: FormComponent,  props: true}

You should refer this.

Passing props with programmatic navigation Vue.js

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.