vue中有contenteditable屬性的div如何數據雙向綁定

昨天的工作中遇到了這樣一個問題.場景是這樣的:與一個第三方合作,對方將頁面以及數據處理寫好了給我們,但是技術棧不一樣,對方是直接使用bootstrap+jquery+layer.js 來構建了兩個頁面.其中一個地方有大致如下代碼:

var num = $("#div1").text()

這裏是通過jQuery來獲取div中的內容,但這裏的div是有 contenteditable 這個屬性的.大家都知道,具有這個屬性的元素是可編輯的.但我們自己的項目是使用vue進行數據的雙向綁定的,而我又不想使用input來代替它原本的div元素.那麼此時的情況應該如何在可編輯元素上實現數據雙向綁定呢?解決方案如下:

// template部分
<div contenteditable v-html="divMsg" @input="inputDiv($event)"></div>

// js部分
const divMsg = ref('')
const inputDiv = e => {
  divMsg.value = e.target.innerHTML
}
retuen {
  divMsg,
  inputDiv
}

這裏因爲我使用了的 @vue/composition-api 來提前感受一波vue的組合api寫法,所以vue的寫法可能和2.x版本有所不同,但思路是一模一樣的.自此,問題得以解決.