Vue.js と At.js を組み合わせる
jQuery 製の AutoComplete を提供する At.js を，Vue のコンポーネントと組み合わせて使ったときのメモ． 完成イメージ 完成版ソースコードはこちら． At.js を使うと次のような挙動が実現できる．WYSIWYG 内で @ を入力すると，入力候補が一覧が表示され，選択すると任意の要素が追加できる． vue-at は使わなかった At.js の Vue 版 vue-at もあるが，At.js の全機能に対応していなかった．(検証当時) 具体的には insertTpl で挿入する HTML を定義する機能が正式リリースされておらず，結局は jQuery 版をそのまま使うことにした． ベースとなる WYSIWYG コンポーネント contenteditable で WYSIWYG を自作する． <template> <div> <div class="WYSIWYG" contenteditable="true" @focus="handleFocus" v-html="content"></div> </div> </template> <script> export default { props: { value: { type: String, default: '' }, disabled: { type: Boolean, default: false } }, data() { return { content: this....