CODEWITHSUNDEEP
javascriptvuejs2vue-component
user3156850
user3156850

Reputation: 85

Vue.js 2 component not displaying data

I'm trying to make a simple vue component work:

<div id="app">
  <my-component></my-component>
</div>

<script>
  Vue.component('my-component', {
    template: '<div>A custom component! {{ xstr }} aa</div>',
    data: function() {
      return {
        xstr: 'i really want this to be visible',
      };
    }
  });

  window.app = new Vue({
    el: '#app',
  });
</script>

But apparently xstr is not displayed. What am I missing?

Upvotes: 1

Views: 40

Answers (1)

user3156850
user3156850

Reputation: 85

I identified my issue, but it's not related to vue. I used jinja2 for generating the html, and since jinja uses the {{ }} syntax for templating as well, the two systems interfered.

Upvotes: 1

Related Questions