Vue html/text editor v-html not working when posted/put (added/edited)

Question

So I'm scouring the internet and it seems as though I'm having the same problem as this issue here.

Basically to a T, I'm experiencing what that user experienced;

I've tried several HTML/Text editors (I'm sticking with Vue2-Editor now), and when I save a post it seems as though the v-html method doesn't do what it's supposed to or I am implementing something incorrectly.

HTML - Display Post

    <div class="message" v-show="announcement.active" :class="{active: announcement.active}">
      <div v-html="announcement.message"></div>
    </div>

Displaying the post example

HTML - Edit Post

   <div v-if="announcement.editing" class="update-inner-wrapper editing">
    <header class="announcement-header">
      <h3 class="date">{{ announcement.date | moment("MM/DD/YYYY") }}</h3>
      <input class="title" v-model="announcement.title">
      <div class="save-btn">
        <button v-if="announcement.editing" @click="editUpdate(announcement, announcement.id)" class="edit">Save <svg class="icon"><use href="#approve"></use></svg></button>
      </div>
    </header>
    <div class="message">
      <vue-editor v-model="announcement.message"></vue-editor>
    </div>
  </div>

Editing the post example

HTML - Add Post

<section class="super-user-options" v-show="openPost">
  <h2>Add a Post</h2>
  <div class="form-wrapper">
    <div class="super-user-form">
      <div class="flex dt">
        <div class="date-title">
          <input placeholder="Enter a Title" v-model="newUpdate.title">
        </div>
        <mq-layout mq="desktop+">
          <button type="submit" @click="addUpdate()" class="add-post-button">
            Add Update
          </button>
        </mq-layout>
      </div>
      <div class="flex text">
        <vue-editor v-model="newUpdate.message"></vue-editor>
        <mq-layout mq="mobile">
          <button type="submit" @click="addUpdate()" class="add-post-button">
            Add Update
          </button>
        </mq-layout>
      </div>
    </div>
  </div>
</section>

Adding a post example

JS - CUD Ops

  async addUpdate(){
  const user = await applicationUserManager.getUser()
  let today = new Date().toJSON().slice(0,10).replace(/-/g,'-');
  let newUpdateData = {
    "date": today,
    "message":  marked(this.newUpdate.message, { sanitize: true }),
    "title": this.newUpdate.title
  }
  this.OPENPOSTDIALOGUE();
  this.UPDATE_KEY(this.componentKey += 1);
  axios.post(this.announcementUrl, newUpdateData, { 'headers': { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + (user ? user.access_token : '') }})
  .then(
    axios.get(this.announcementUrl).then(response => {
        this.announcements = response.data
    })
  )
},
//EDITUPDATE
async editUpdate(announcement, id){
  const user = await applicationUserManager.getUser()
  let newUpdateData = {
    "id": announcement.id,
    "date": announcement.date,
    "message": marked(announcement.message, { sanitize: true }),
    "title": announcement.title
  }
  this.UPDATE_KEY(this.componentKey += 1);
  axios.put(this.announcementUrl + "/" + id, newUpdateData, { 'headers': { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + (user ? user.access_token : '') }})
  axios.get(this.announcementUrl).then(response => {
      this.announcements = response.data
  })
},
//DELETE UPDATE
async deleteUpdate(announcement, id){
  const user = await applicationUserManager.getUser()
  axios.delete(this.announcementUrl + "/" + id, { 'headers': { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + (user ? user.access_token : '') }})
  this.UPDATE_KEY(this.componentKey += 1);
  axios.get(this.announcementUrl).then(response => {
      this.announcements = response.data
  })
},

What am I doing wrong?

Answer 1

The rich text editor is returning a html string which can be directly used in v-html.

So replace marked(announcement.message, { sanitize: true })

With: "message": announcement.message

Here's an example using CKeditor: https://jsfiddle.net/ellisdod/5g1cptjb/