How to change a paragraph into an input for a change of content?

Question

I creating comments system. I'm blocked. because I want to make the paragraph change into an input after clicking on edit. This is my code :

    <section class="modal-card-body">
  <p v-html="modalData.description" />
</section>
<section class="modal-card-body">
  <article class="media">
    <figure class="media-left">
      <p class="image is-64x64">
        <img src="https://bulma.io/images/placeholders/128x128.png">
      </p>
    </figure>
    <div class="media-content">
      <div class="content">
        <strong>Barbara Middleton</strong>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris sit amet dolor blandit rutrum. Nunc in tempus turpis.
          <br>
          <small> <a>Edit</a> · <a @click="openDeleteModal()">Usuń</a> · 3hrs</small>
        </p>
      </div>
    </div>
  </article>
  <article class="media">
    <figure class="media-left">
      <p class="image is-64x64">
        <img src="https://bulma.io/images/placeholders/128x128.png">
      </p>
    </figure>
    <div class="media-content">
      <form @submit.prevent="addComment">
        <div class="field">
          <p class="control">
            <textarea v-model="contentComment" class="textarea" placeholder="Add a comment..." required />
          </p>
        </div>
        <div class="field">
          <p class="control">
            <b-button
              type="is-success"
              rounded
              native-type="submit"
            >
              Dodaj komentarz
            </b-button>
          </p>
        </div>
      </form>
    </div>
  </article>
</section>

which looks like this :

I found the desired effect in trello in the comments section. Can someone help me?

Answer 1

This is my working example:

Vue.component("comment", {
  template: "#comment",
  data() {
    return {
      edit: false,
      content: this.value
    };
  },
  props: {
    author: String,
    value: String
  },
  methods: {
    doEdit() {
      this.edit = true;
    },
    doSave() {
      this.edit = false;
      this.$emit("input", this.content);
    }
  }
});

Vue.component("comments", {
  template: "#comments",
  data() {
    return {
      comments: [
        {
          id: 1,
          author: "Fus",
          message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        },
        {
          id: 2,
          author: "Ro",
          message: "Etiam nec sapien non arcu faucibus gravida at nec felis."
        },
        {
          id: 3,
          author: "Dah",
          message:
            "In ac felis libero. Morbi placerat sit amet nisi eu ultrices."
        }
      ]
    };
  }
});

new Vue().$mount("#app");

.content,
.author {
  margin: 5px;
  max-width: 300px;
  border: 1px dashed gray;
  background-color: silver;
}

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

<script type="text/x-template" id="comments">
  <section>
    <comment v-for="item in comments" v-model="item.message" :author="item.author" :key="item.id"></comment>
  </section>
</script>

<script type="text/x-template" id="comment">
    <article>
        <div class="author">Who: {{ author }}</div>
        <div v-if="edit"><textarea v-model="content"></textarea></div>
        <div v-else class="content">{{ value }}</div>
        <button v-if="edit" @click="doSave">Save</button>
        <button v-else @click="doEdit">Edit</button>
    </article>
</script>