CODEWITHSUNDEEP
vue.js
Ronald
Ronald

Reputation: 336

how to pass different set of props to a vue child

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"

Upvotes: 1

Views: 1772

Answers (1)

skribe
skribe

Reputation: 3615

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/

Upvotes: 2

Related Questions