Vue.jsには{{post.title}}のような角括弧は表示されません

Question

何らかの理由でVueが{{post.title}},{{ post.content }}のブラケットを表示しません。内容は空です（下のレンダリングされたHTMLを見てください）が、何らかの理由でv-bind:href="post.url"が動作します。私はVue.jsを初めて使っていて、今日は本当に立ち往生しています。 Backstory： このコードは、私のジキルブログのVueインスタント検索です。

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