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

Answer 1

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

Answer 2

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

Reference Link