Vue.js不顯示括號，如{{post.title}}

Question

由於某些原因，Vue不會爲我呈現{{post.title}}，{{ post.content }}括號。內容爲空（查看下面呈現的html），但v-bind:href="post.url"出於某種原因。我是Vue.js的新手，現在真的很困難。 Backstory： 此代碼是Vue即時搜索我的Jekyll博客。

HTML

<div v-if="articles" class="large-12 columns"> 
    <article v-for="post in itemsSearched" class="article-summary"> 
     <header> 
     <h2><a v-bind:href="post.url">{{post.title}}</a></h2> 
     </header>  
     <p>{{ post.content }}</p>  
     <div class="large-12 column"> 
     <a class="read-more" v-bind:href="post.url">Read More...</a> 
     <div class="middle_line"></div> 
     </div> 
    </article>  
</div> 

渲染HTML

<article class="article-summary"> 
    <header> 
     <h2><a href="/jekyll-update/2017/05/23/welcome-to-jekyll.html"></a></h2> 
    </header> 
    <p></p> 
    <div class="large-12 column"> 
     <a href="/jekyll-update/2017/05/23/welcome-to-jekyll.html" class="read-more">Read More...</a> 
     <div class="middle_line"></div> 
    </div> 
</article> 

Answer 1

Jekyll使用double curly braces本身，所以您需要爲您的Vue自定義delimiters。

new Vue({ 
    delimiters:['<%', '%>'], 
    .... 
}) 

然後用

<% post.title %> 

相反。

你可以定義你想要的任何分隔符，我只是用它們作爲例子。

Answer 2

請改用v-text或v-html。在vue 2.0中，Vue-config-delimiters已被棄用，僅在完整版本中有效。[]：https://vuejs.org/v2/guide/migration.html#Vue-config-delimiters-replaced