0

I'm trying to use a props from the parent component to use it as a data in my child component.

parent component :

 <ChangeCommentModal :comment="this.modalInfo.comment" />

And child component (ChangeCommentModal) :

props: ['comment'],
data() {
  return {
    localComment: this.comment,
  };
}

The localComment variable get the value but I can't use it in a v-model in this child component :

<textarea id="message" rows="2" v-model="localComment"></textarea>

The textarea is empty when the component is displayed.

Any idea ? Thanks !

Arnaud
  • 15
  • 4
  • Seems fine to me. Could some other code not mentioned be affecting it? – Evan Summers Sep 20 '22 at 08:48
  • Yes I looked at the documentation it this is what they are doing. One thing I didn't mentionned is that this component is a Modal that shows up when you click on a button. The data are passed with a $root.$emit to the parent component but all the props are fine. When I update my code (it's with npm run serve) sometimes the values shows up – Arnaud Sep 20 '22 at 08:57
  • When I'm directly modifying the props, everything works fine but I get the warning message "Avoid mutating a prop directly..." – Arnaud Sep 20 '22 at 09:16

1 Answers1

1

Seems your code is only assign this.comment to localComment once when the child component is init. Instead, you can use watcher to watch the change of prop comment and assign it to the localComment everytime you update from the parent component. Let's try to see if resolve your problem

watch() {
   comment(value) {
      this.localComment = value
   }
}
vicnoob
  • 1,169
  • 13
  • 27