#useForm + props not reactive

1 messages · Page 1 of 1 (latest)

austere field
# 
  customer: props.subscription ? props.subscription.customer : null
});```

`watch` seems to catch the props.subscription change but not in the form

e.g. can't see the updated value in my input `<q-input v-model="form.customer">`
pseudo notch
#

That's correct, the form isn't reactive by design. It's just initialized with those values

austere field
#

I have tried wrapping it with reactive but that didn't work either

  customer: props.subscription ? props.subscription.customer : null
}));```
lament helm
#

That's just not how it works. That's not how any of this works.

#

You've stripped all reactivity you seem to want to check before trying to make it reactive again (which the form already does, on a non-reactive clone of the data, so properties on the form can be reactive to the UI layer).

pseudo notch
#

The form isn't reactive on props tho, as I mentioned, it initializes with those values. If those props change, the form won't be updated, so it wouldn't take updated values from props.subscription in this case

lament helm
#

If you want to store the customer only for the purpose of sending it along to the back end, see the transform method to tack it on right at the last moment.

#

But at the end of the day, the form is not meant to be holding computed references, it's meant to be a bundle of normal mutable references for a user to be editing via a HTML form of sorts.

#

If you for some reason want it to be something someone can override, but then still be overridden if the component's props change, a normal ref is probably the best idea, then use a watch on the props to override it. Use the transform method on the form to tack it onto the payload sent.

lament helm