Vue.js component prop without 2 way binding?

2019-07-13 18:25发布

I found this question that is similar, but it did not explain the issue I am trying to solve for. (Using Vue.js 2)

I have an array of objects (users), that I display as a list. I want to open an "edit user" modal component, which needs to prefill the form values with the user data (exact parent object), but I do not want to edit the parent data until I click a save button that verifies the data before emitting an input event with the new values of the object.

I do not want to manually call out each property to create a new "clean" object (if I change the data type this is a headache), but Vue is adding its reactivity to the user object and therefore modifying the value in the component updates the parent value at the same time.

I also want to wait for the server to confirm a change is saved before emitting the input event; therefore the parent won't update until the data is confirmed on the server.

Is there a recommended pattern for non-reactively modifying props in components, instead using the emitted input event to update, as per the Vue component prop/event specs?

Note: I already have a working example, save for the concern with separating the reactivity bit.

0条回答
登录 后发表回答