Vue.js 2 component not displaying data

Question

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?

This code works, create non-working demo.

dfsq
– dfsq

2018-01-09 13:51:08 +00:00
Commented Jan 9, 2018 at 13:51 — dfsq
– dfsq, Commented Jan 9, 2018 at 13:51
It doesn't work for me. Which version are you using?

user3156850
– user3156850

2018-01-09 13:57:45 +00:00
Commented Jan 9, 2018 at 13:57 — user3156850
– user3156850, Commented Jan 9, 2018 at 13:57

user3156850 · Accepted Answer · 2018-01-09 14:01:27Z

0

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.

answered Jan 9, 2018 at 14:01

user3156850

651 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js 2 component not displaying data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related