Consider a VueJS app that allows for showing / editing blogposts.

• On clicking "edit blogpost" a modal (Vue ponent) is shown to edit the current blogpost (just an ordinary js-object).
• To this end I pass the current blogpost as a prop to the modal-ponent.
• The Modal ponent has a couple of form fields that should be populated with the blogpost-attributes.
• However, the Vue 'way' is to have a data object on the Modal-ponent that acts as the model to populate the form fields, and vice-versa, be updated when the user changes the form fields.

The problem: How do I connect the blogpost which is passed as a prop to the data field of the modal-ponent so that:

• the blogpost populates the form fields
• the blogpost gets updated when updating the form fields

What's the correct Vue way to acplish this?

Consider a VueJS app that allows for showing / editing blogposts.

• On clicking "edit blogpost" a modal (Vue ponent) is shown to edit the current blogpost (just an ordinary js-object).
• To this end I pass the current blogpost as a prop to the modal-ponent.
• The Modal ponent has a couple of form fields that should be populated with the blogpost-attributes.
• However, the Vue 'way' is to have a data object on the Modal-ponent that acts as the model to populate the form fields, and vice-versa, be updated when the user changes the form fields.

The problem: How do I connect the blogpost which is passed as a prop to the data field of the modal-ponent so that:

• the blogpost populates the form fields
• the blogpost gets updated when updating the form fields

What's the correct Vue way to acplish this?

• javascript
• vue.js

Share Improve this question Follow asked Jul 20, 2016 at 18:07 Geert-JanGeert-Jan 18.9k1919 gold badges8181 silver badges145145 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You have three (at least) ways of doing it:

1) Connect the data via the prop attribute, just as you are doing, but add the .sync attribute to it. This way, when the data is modified on the form, it automatically gets modified too on the ponent. The problem with this solution is that the update is automatic, so if a validation fails, or the user closes the modal without saving the changes, these are saved anyway. An example: https://jsfiddle/Lz3aq64f/

2) The other way of doing it is getting the modal to $dispatch an event with the saved information when it's saved. The blogpost element should listen for this event and act accordingly.

On the modal:

this.$dispatch('update-post', this.title, this.author);

On the blogpost:

this.$on('update-post', function(title, author) {
  this.title = title;
  this.author = author
});

If the blogpost ponent and the modal ponent are not in the same hierarchy, things get a little bit more plicated, and probably you need the mon parent element to act as a proxy. Think of the modal element dispatching the information up, the #app element catching it via $on, and then doing $broadcast to the blogpost element.

3) Use something like vuex to act as a central repository of state. I don't know how big is your application, but this would be the cleanest way to go: http://vuex.vuejs/en/index.html

Good luck!