来自道具的数据未显示在 v-model (VueJS) 中答案

【问题标题】：Data from props not showing in v-model (VueJS)来自道具的数据未显示在 v-model (VueJS) 中
【发布时间】：2022-09-20 17:21:31
【问题描述】：

我正在尝试使用父组件中的道具将其用作子组件中的数据。

父组件：

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

和子组件（ChangeCommentModal）：

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

localComment 变量获取值，但我不能在此子组件的 v-model 中使用它：

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

显示组件时 textarea 为空。

任何想法？谢谢！

对我来说似乎很好。其他一些未提及的代码会影响它吗？
是的，我查看了文档，这就是他们正在做的事情。我没有提到的一件事是这个组件是一个模式，当你点击一个按钮时会出现。数据通过 $root.$emit 传递给父组件，但所有道具都很好。当我更新我的代码（它使用 npm run serve）时，有时会显示这些值
当我直接修改道具时，一切正常，但我收到警告消息“避免直接改变道具......”

【解决方案1】：

似乎您的代码仅在子组件初始化时将this.comment 分配给localComment 一次。相反，您可以使用 watcher 来观察 prop comment 的变化，并在每次从父组件更新时将其分配给 localComment。让我们试试看能否解决您的问题

watch() {
   comment(value) {
      this.localComment = value
   }
}

【讨论】：