How to send data one component to another after button click Vuejs

Question

I have two components one is User component and inside the user component there is edit user component(Modal box), so my problem is how to pass the user object to edit user component after click edit user button.

User view

<div>
    <v-layout row wrap>
        <v-flex sm3 xs2 v-for="user in users">
            <v-card>
                <v-card-media src="https://vuetifyjs.com/static/doc-images/cards/plane.jpg"
                              height="200px">
                </v-card-media>
                <v-card-title primary-title>
                    <div>
                        <h3 class="headline mb-0">{{user.name}}</h3>
                        <div><b>Email : </b>{{user.email}}</div>
                    </div>
                </v-card-title>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn primary dark @click="editUser(user)">Edit</v-btn>
                    <v-btn error dark>View</v-btn>
                </v-card-actions>
            </v-card>
        </v-flex>
    </v-layout>

    <edit-modal></edit-modal>

</div>

edit modal

<v-layout row justify-center>
    <v-dialog persistent width="30%">
        <v-card>
            <v-card-title>
                <span class="headline">User Profile</span>
            </v-card-title>
            <v-card-text>
                <v-container grid-list-md>
                    <v-layout wrap>
                        <v-flex xs12 sm6 md12>
                            <v-text-field label="Legal first name" required></v-text-field>
                        </v-flex>
                        <v-flex xs12 md6>
                            <v-text-field label="Email" required ></v-text-field>
                        </v-flex>
                    </v-layout>
                </v-container>
                <small>*indicates required field</small>
            </v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn light @click.native="dialog">Close</v-btn>
                <v-btn primary @click.native="saveUser">Save</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</v-layout>

Screen shot

Kumar_14 · Accepted Answer · 2017-09-27 07:02:06Z

2

What you can do is initially define a empty user model in User component which is just like the dummy object and pass it as a props to edit modal component and use v-if to hide and show the model:

<edit-modal v-if="isShowModel" :userObj="userObj"></edit-modal>

In script part:

data() {
   return {
      userObj: {
          name: '',
          email: ''
      },
      isShowModel: false
   }
},
methods: {
  editUser(user) {
    this.userObj.name = user.name;
    this.userObj.email = user.email;
    this.isShowModel = true;
  }
}

In edit component access it with props:

props:['userObj'],
data() {
  return {
    newUserObj: Object.assign({}, this.userObj),
  }
}

This will work. But there is another method you can use $refs also Give a ref attribute to the edit modal:

<edit-modal ref="editme"></edit-modal>

Then in script part access this ref:

methods: {
  editUser(user) {
    this.$refs.editme.name = user.name;
    this.$refs.editme.email = user.email;
  }
}

In edit component define name and email in data()

data() {
    return {
       name: '',
       email: ''
    }
}

Now to update those edited values in parent component you can use $emit:

<v-btn primary @click.native="saveUser">Save</v-btn>

in script:

methods: {
  saveUser() {
    this.$emit('onEditValue', this.name, this.email);
  }
}

In parent component:

<edit-modal
  ref="editme"
  @onEditValue="editCall"
></edit-modal>

In script:

methods: {
  editCall(name, email) {
    this.user.name = name;
    this.user.email = email;
  }
}

edited Sep 27, 2017 at 7:02

answered Sep 27, 2017 at 5:56

Kumar_14

5843 silver badges15 bronze badges

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

8 Comments

user3955928 Over a year ago

Its working fine. but not met the my requirement . I want to avoid parent data change.. ( I change the value from modal box real time update parent view) watch: { edit: function (nv, ov) { this.func = nv } },

Kumar_14 Over a year ago

ok so you want to pass those updated values to parent component also. gotcha, I will update my code for it.

user3955928 Over a year ago

No. I dont want to send edited data to parent. i want to avoid parent data changes. check the image i have attached

Kumar_14 Over a year ago

In that case in you child data() made a copy of the props passed from the parent userObj: Object.assign({}, this.userObjFromProps), this will do the trick

Kumar_14 Over a year ago

Updated my answer accordingly

|

Rohit Goyal · Accepted Answer · 2017-09-27 06:06:07Z

0

If the two components are siblings, you can use Event Bus provided by Vuejs

Reference Link

answered Sep 27, 2017 at 6:06

Rohit Goyal

2321 gold badge2 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to send data one component to another after button click Vuejs

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related