Vue2：使用具有输入类型textarea的表单组件来显示和编辑数据无需直接操作道具

如何解决Vue2：使用具有输入类型textarea的表单组件来显示和编辑数据无需直接操作道具

我正在构建MVP，这是我第一次进行Web开发。我正在使用Vue2和Firebase，到目前为止，一切顺利。

但是，我遇到了一个我无法独自解决的问题。我有一个想法，它应该如何工作，但不能将其写到代码中，希望你们能帮助我理清思路。到现在为止，我感到非常困惑和沮丧：D

所以让我们看看我得到了什么：

子组件 我建立了一个子组件，该组件是具有三个文本区域的表单。为简单起见，我的代码段中仅包含一个。

<template>
  <div class="wrap">
    <form class="form">
    
      <p class="label">Headline</p>
      <textarea rows="2" 
      v-model="propHeadline" 
      :readonly="readonly">
      </textarea>
      
      // To switch between read and edit
      <button
        v-if="readonly"
        @click.prevent="togglemode()">
        edit
      </button>
      <button
        v-else
        type="submit"
        @click.prevent="togglemode(),updatePost()"
      >
        save
      </button>
    </form>
  </div>
</template>

<script>
export default {
name: 'PostComponent'
  data() {
    return {
      readonly: true
    }
  },props: {
    propHeadline: {
      type: String,required: true
    }
  },methods: {
    togglemode() {
      if (this.readonly) {
        this.readonly = false
      } else {
        this.readonly = true
      }
    },updatePost() {
      // updates it to the API - that works
    }
  }
}
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

和我的父级组件：

<template>
  <div class="wrap">
      <PostComponent
        v-for="post in posts"
        :key="post.id"
        :knugHeadline="post.headline"
      />
  </div>
</template>

<script>
import PostComponent from '@/components/PostComponent.vue'

export default {
  components: { PostComponent },data() {
    return {
      posts: []
    }
  },created() {
    // Gets all posts from DB and pushes them in array "posts"
}
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

当前状态 到目前为止，一切正常。我可以显示所有帖子，单击“编辑”时可以进行更改并保存。一切都更新为Firebase-很棒！

问题/错误消息 我收到以下错误消息：

[Vue警告]：避免直接更改prop，因为每当父组件重新渲染时，该值就会被覆盖。而是根据道具的值使用数据或计算属性。

如错误所述，我应该使用基于props值的计算属性。但是我该怎么实现呢？

解决方法 我相信我必须使用计算的吸气剂来返回prop值-如何做到这一点？

然后我必须使用setter向父对象发送一个事件以更新值，以便道具将其传递回去-如何做到这一点？

我在网上发现了点点滴滴，但现在我所看到的只是幸福的家庭在传递小包装的数据……

真的很感谢您提出有关如何解决此问题的建议！：）

非常感谢！