Issue with Vue.js : Doesn't display data

Question

I'm learning Vue.js framework and I'm making some tries in order to handle this JavaScript framework.

My example is very simple, but I don't overcome to display data {} according to .html and .js files.

This is my .html file :

<!DOCTYPE html>
<html>
<head>
    <title>Test de Vue.js</title>
    <script src="test.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
</head>
<body>

    <div id='test'>
        <p>{{ texte }}</p>
    </div>

</body>
</html>

And my .js file located in the same directory :

var vm = new Vue ({
    el : '#test',
    data : {
        texte : 'Ceci est un premier test en Vue.js'
    }
});

But, I don't know why my browser displays this :

Thank you so much

@Derek Yes you can see script src="test.js"></script> in my HTML file — Essex
– Essex, Commented Jul 9, 2018 at 8:33
Move your script to the bottom of the page. test.js is running before the HTML is rendered. And also the scripts are in reverse order. — Bert
– Bert, Commented Jul 9, 2018 at 8:33
@RolandStarke Oh ok ! I have to load CDN in first time, then my .js script — Essex
– Essex, Commented Jul 9, 2018 at 8:34

juzraai · Accepted Answer · 2018-07-09 08:44:03Z

2

Your scripts are in incorrect order. You have to include Vue.js first, then your script as second, because your script references Vue object, which is defined in vue.js.

Also, while vue.js can be included in <head>, your Vue model definition should go into the <body> tag, after the target element, otherwise, it will not work.

<head>
    ...
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
</head>
<body>
    <div id="test">...</div>
    <script src="test.js"></script>
</body>

edited Jul 9, 2018 at 8:44

answered Jul 9, 2018 at 8:34

juzraai

5,9798 gold badges36 silver badges49 bronze badges

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

2 Comments

Essex Over a year ago

Ok ! Right it works now ! It's really a newbie issue .. I'm sorry :/ Thank you !

Essex Over a year ago

I have to move my .js script outside of HTML header ;)

Collectives™ on Stack Overflow

Issue with Vue.js : Doesn't display data

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related