how to pass different set of props to a vue child

Question

I have a parent vue component consisting of a list of items when clicked on an item a edit part child component becomes visible, on the mounted method of the child the parameters are set for edit however when clicking a different item the mounted method on the child is of course not called again, leaving the same state visible how can i reset the child?, the content of the child is sent using props, parent roughly

    <div v-for="user in users" :key="user.id" @click=editUser(user)>{{user.name}}
</div>
      <EditUser props="editedUser" edit=true v-if=editingUser

 method: editUser(user){
   this.editingUser=true
   this.editedUser.name=user.name;
 }

and the child roughly:

mounted:function(){
   this.name=editedUser.name;
}
<input type="text" v-model="name"

Please show some code so we can understand and answer better. Also when you say "..when clicking on a different item..." You are saying you want to click on a different item in the parent and update the child with that items props, right? — skribe
You're probably not—or, incorrectly—declaring the props in your EditUser component. In that case there is no reactivity and the child component won't respond to the update on the parent. If that's not the problem, you probably don't set name on update of the editedUser props. mounted won't be called on props updates; so, you will need to define a watcher for this. Either way: post executable code please. — FK82
I work with Vue.js every day, and do exactly what you are describing without any issues at all. Since you are showing your code only roughly, it is not possible to see where your issue is. But you are most certainly not passing your props properly in the example above. The line props="editUser" if it does anything, is only passing the actual string "editUser" certainly not a object. — skribe
P.S. Please read the documentation examples here vuejs.org/v2/api/#props and here vuejs.org/v2/guide/… Pay special attention to the use ov v-bind in ` v-bind:title="post.title"` it goes without saying the the shorthand for v-bind is simply the colon by itself. — skribe

skribe skribe · Accepted Answer · 2018-09-15T15:26:31

The functionality you are describing is simple and if you are passing the props correctly the child should be reactive and update without any issues. With a quick look I don't see what is causing your issue. The best I can do at this point is to show you a simple example of something like you describe working.

Edit: Now I see on second look that you are trying to pass your props like props='something' I am not sure if you are just naming your prop "props" or what there, but typically you pass a prop with with a kabab-case :my-prop='someObject' and notice that it is using ':' the short hand "v-bind" on that prop as well. Then in your child component you receive the props by doing props: ['myProp'] (use camelcase).

I created this example while you were updating your code. So it is a bit different, but the principle is the same. Notice I am passing the item into the function with a button click and that is updating the prop that is set on the "edit" component

<button @click="edit(item)">edit</button>
//....
<edit-component v-if='showEdit' :item-data="editData">

https://jsfiddle.net/skribe/m60xof4b/

how to pass different set of props to a vue child

1 Answers