Vue.js doesn't display brackets like {{ post.title }}

Question

For some reason Vue doesn't render {{post.title}}, {{ post.content }} brackets for me. The content is empty (look at the rendered html below), but v-bind:href="post.url" works for some reason. I'm new to Vue.js and really stuck for day now. Backstory: this code is Vue instant search for my Jekyll blog.

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>

Rendered 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 uses double curly braces itself, so you need to define custom delimiters for your Vue.

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

And then use

<% post.title %>

Instead.

You can define whatever delimiters you want, I just used those as an example.