Vue.jsでMarkdownをパースするためのvue-markdownの紹介と絵文字サジェストを作った話 ref: http://qiita.com/nasum/items/ec53060b8ec5a3534aa4

file0.html

<div id="app">
  <h1>Vue Markdown Editor</h1>
  <div class="editor-main">
    <div class="main">
      <textarea class="editor" v-model="source"></textarea>
      <div class="preview">
        <vue-markdown :source="source"></vue-markdown>
      </div>
    </div>
  </div>
</div>

file1.js

import VueMarkdown from 'vue-markdown'
export default {
  name: 'app',
  data () {
    return {
      source: ""
    }
  },
  components: {
    VueMarkdown
  }
}

file2.html

<div>
    <span>{{ preConvertEmoji }}</span>
    <ul>
      <li v-for="key in suggest_filter()">
        {{ key }} : {{ emojiList[key] }}
      </li>
    </ul>
    <textarea class="editor" v-on:keyup="enter"></textarea>
</div>

file3.js

//絵文字の一覧jsonを読み込む。
//絵文字一覧のJSONはmarkdown-it-emojiから拝借
//https://github.com/markdown-it/markdown-it-emoji
import emojiOrigin from '../data/light.json'

export default {
  name: 'suggest',
  data () {
    return {
      emojiList: emojiOrigin,
      preConvertEmoji: ""
    }
  },
  methods: {
    suggest_filter: function () {
      const emoji = this.preConvertEmoji.replace(/:/g, '')

      if (emoji == ""){
        return []
      }

      //読み込んだemojiOriginから前方一致で候補を5つ出す
      return Object.keys(emojiOrigin).filter(function (key) {
        return key.indexOf(emoji) == 0
      }).slice(0, 5)
    },
    enter: function(data){
      const words = data.target.value.split(/\s/)
      const lastWord = words.pop()
      //最後に入力している単語がコロンからはじまっていれば絵文字入力と見なして入力中の文字を保持する
      if(lastWord.indexOf(':') == 0){
        this.preConvertEmoji = lastWord
      } else {
        this.preConvertEmoji = ""
      }
      // 親コンポーネントに入力を渡すために$emitを使っている
      this.$emit('enter', data.target.value)
    }
  }
}