CODEWITHSUNDEEP
javascripthtmlvue.js
ryanwaite28
ryanwaite28

Reputation: 2050

Vue.js - Double curly braces(Mustache) syntax not working/rendering to page

i just started learning vue.js

i don't know why but the double curly braces syntax isn't rendering, but when i use the v-text directive, it does work. here is my code:

html:

<!DOCTYPE html>
<html>
  <head>
    {% include '_depend.html' %}

    <title></title>
  </head>
  <body>

    {% if signed_in %}
      {% include 'nav-signed-in.html' %}
    {% else %}
      {% include 'nav-signed-out.html' %}
    {% endif %}

    <!--  -->

    <div id="welcome-vue" class="container container-top-space">
      <div class="row">
        <div class="col s12">
          <div class="card-panel">
            <p class="text-center">{{ header_msg }}</p>
          </div>
        </div>
      </div>
    </div>


    <script src="/vault/js/vue.min.js"></script>
    <script src="/vault/js/vues/welcome-ctrl.js"></script>

    <!--  -->

    {% include 'footer.html' %}

    {% include '_events.html' %}

  </body>
</html>

js:

const welcomeVue = new Vue({
  el: '#welcome-vue',
  data: {
    header_msg: 'sample message'
  }
});

Why won't the double curly brace work? There are no errors in the console and when I log the Vue instance, everything is there, including the $el property.

Upvotes: 1

Views: 5034

Answers (1)

Beso Kakulia
Beso Kakulia

Reputation: 602

You have conflict with twig template 

{% verbatim %}
    new Vue({
        el: '.container',
        data: {
            foo: 'Hello world.'
        }
    });
{% endverbatim %}

use Vue instance like this. Conflict on Template of Twig and Vue.js You can find more about your question in this post.

Upvotes: 3

Related Questions