CODEWITHSUNDEEP
javascriptvue.jsvuejs2
DunDev
DunDev

Reputation: 210

Problems with vue.js content rendering

I've just learning Vue.js and I'm getting stuck with some problems with its rendering. Let's say I have the following lines of code:

index.html

<div id="header">
  <h5>{{pageName}}</h5>
  <p>{{pageSubtitle}}</p>
</div>

app.js

var header = new Vue({
  el: '#header',
  data: {
    pageName: 'CuteCat',
    pageSubtitle: 'World of cats'
  }
});

When I load the page, the CuteCat and World of cats is shown perfectly but when I view source, this is what I get:

<div id="header">
  <h5>{{pageName}}</h5>
  <p>{{pageSubtitle}}</p>
</div>

What can I do to replace the mustaches brackets in the view source with its declared value like this?

<div id="header">
  <h5>CuteCat</h5>
  <p>World of cats</p>
</div>

Upvotes: 1

Views: 354

Answers (1)

Las Ten
Las Ten

Reputation: 1175

Just as @yuriy636 is telling you, this is not an error by any means.

Vue is a JavaScript UI framework, making its magic in the client (i.e. in the browser). In the source view you see what's been loaded from the server and what you see is exactly that.

If you disable JavaScript for a session and reload your app, the double mustaches will be visible. Because they are replaced by Vue when JS is on.

Edit: In the DOM, however everything is normal after Vue rendering, just as you would expect it.

Upvotes: 1

Related Questions