Data from props not showing in v-model (VueJS)-CodePudding

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 !

CodePudding user response：

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
   }
}