CODEWITHSUNDEEP
javascriptvue.jsparameter-passingvue-router
Sameer
Sameer

Reputation: 91

How to pass parameters from one component to another in router.push() (Vue.js)?

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

Upvotes: 1

Views: 3206

Answers (1)

Riddhi
Riddhi

Reputation: 2244

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

Upvotes: 2

Related Questions