[筆記] Vue3 TypeScript 版本的 JSON Editor – vue3-ts-jsoneditor

近期在 Vue3 專案上需要有個 JSON 編輯器,於是在尋尋覓覓後,找到以 svelte-jsoneditor 為基底的 vue3-ts-jsoneditor。這邊筆記下進行二次封裝後的一些細節。
vue typescript


重點

1. 透過 v-model:<變數名> 來同步父子元件的值
2. 在 @change 的 callback 函式時,可以順便處理 JSON 字串的解析
3. 若你要保留「特殊字元」的話,在父層會需要再次 JSON.stringify()。如此一來,當你從資料庫中再次取回值是,進行 JSON.parse() 才不會因為特殊字元而報錯

程式碼


參考資料

1. vue3-ts-jsoneditor – Github
2. vue3-ts-jsoneditor – NPM

按讚加入粉絲團

延伸閱讀