鍍金池/ 問答/HTML/ Vue官方案例Markdown編輯器改寫出了問題

Vue官方案例Markdown編輯器改寫出了問題

原始代碼在下面這個鏈接里：
Markdown 編輯器 Example
我想把它放在一個全局組件里，然而失敗了，代碼如下：

<!DOCTYPE>
<html>
  <head>
    <meta charset="utf-8">
    <title>markdown silly</title>
    <style>
      html, body, #editor {
        margin: 0;
        height: 100%;
        font-family: Arial, Helvetica, sans-serif;
        color: #333;
      }

      textarea, #editor div {
        display: inline-block;
        width: 49%;
        height: 100%;
        vertical-align: top;
        box-sizing: border-box;
        padding: 0 20px;
      }

      textarea {
        border: none;
        border-right: 1px solid #ccc;
        resize: none;
        outline: none;
        background-color: #f6f6f6;
        font-size: 14px;
        font-family: Courier New, Courier, monospace;
        padding: 20px;
      }

      code {
        color: #f66;
      }
    </style>
  </head>
  <body>
    <div id="editor">
      <markdown-editor></markdown-editor>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/marked@0.3.6"></script>
    <script src="https://unpkg.com/lodash@4.16.0"></script>
    <script>
      Vue.component('markdown-editor', {
        template:
        `<textarea :value="input" @input="update"></textarea>
        <div v-html="compiledMarkdown"></div>
        `,
        data: function() {
          return {
            input: '# hello',
          }
        },
        methods: {
          update: _.debounce(function(e) {
            this.input = e.target.value
          }, 100)
        },
        computed: {
          compiledMarkdown: function () {
            return marked(this.input, { sanitize: true })
          }
        },
      });

      new Vue({
        el: '#editor',
      })
    </script>
  </body>
</html>

經(jīng)過各種console.log，已經(jīng)基本確定問題在于v-html并沒有根據(jù)compiledMarkdown進行同步，而原例卻沒有問題。這是為什么？

回答
編輯回答
薄荷綠

好吧，我自己找到答案了。由于沒有使用開發(fā)版vue.js所以有個很明顯的錯誤它并沒有提出來——那就是模板必須有一個根節(jié)點，不能一盤散在反引號里。
就是這樣……

2017年3月1日 00:50