I am currently developing a component that is responsible for receiving data through a prop, making modifications to that data, and then emitting it back to the parent (as well as watching for changes).
Is it possible for a prop to be reactive? If not, what is the alternative method for assigning a prop to a reactive property?
I attempted to address this issue by:
- defining
props: ["receiveddata"] - creating a reactive property within
data(for example,hello: '') - setting
this.hello = this.receiveddatain themounted()lifecycle hook
My expectation was that at this stage, this.hello would contain the content passed via the receiveddata prop, allowing me to work on this.hello thereafter (modifying it, monitoring it, and emitting it when necessary)
However, upon inspecting the values using DevTools, I observed that
this.hellowas undefinedthis.receiveddatacorrectly stored the initially provided data
It seems that during the mounted() phase, the prop values are not yet available (explaining the initial undefined value of
this.receiveddata</code), which is then assigned to <code>this.hellothis.receiveddata is updated.
In essence, my assignment of this.hello = this.receiveddata was incorrectly placed. However, finding the correct placement remains a challenge (I have even experimented with switching from mounted() to created())