Vue.js suddenly not working

Question

I am working with Vue.js, and for some reason it just stopped working. I can't seem to find my mistake - been looking at it for hours.

This is my HTML file - just dependencies and a table that displays the data in users.

<!DOCTYPE html>
<html>
    <head>
        <title>Hello, world!</title>
    </head>
    <body>
        <script
            src="https://code.jquery.com/jquery-3.3.1.min.js"
            type="text/javascript">
        </script>
        <link 
            href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
            rel="stylesheet" 
        >
        <script
            src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            type="text/javascript">
        </script>
        <script
            src="https://cdn.jsdelivr.net/npm/vue"
            type="text/javascript">
        </script>

        <script src="/js/app.js" type="text/javascript"></script>

        <div class="container">
            <div id="app">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Personal Number</th>
                            <th>Volcano Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="user in users">
                            <td><% user.name %></td>
                            <td><% user.personal_number %></td>
                            <td><% user.volcano_amount %></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </body>
</html>

And this is the app.js file - which just inits the Vue instance, creates the users array, and runs an AJAX request that updates the users array.

var app = new Vue({
    el: '#app',
    data: {
        users: []
    },
    mounted: function() {
        var vue_object = this;
        $.getJSON('users', function(data) {
            vue_object.users = data;
        });
    },
    delimiters: ['<%', '%>']
});

The result is extremely disappointing - Everything is in plain HTML. The table has 2 rows - the header, and a row with <% user.xxx %>, as if Vue did not exist.

I guess this means that something is not running, though the app.js itself does run (I tried adding console.log and it did print)

Hope you have good ideas :)

check your console log if you see errors, also remove `var app =` part and see what happens — samayo, Apr 04 '18 at 15:16
console has no errors :( . Also, I'm not 100% sure I understood what you meant, but I tried removing the `var` part, and tried leaving it as `new Vue(...` and both did not work. — Ash42, Apr 04 '18 at 15:22
can you do `{{ users }}` after your #app div? see if the mounted hook is calling the jquery part correctly — samayo, Apr 04 '18 at 15:24
Isn't `<% user.name %>` ASP syntax, while Vue's should be `{{ user.name }}` ? Or is it the same and I just learned something new ? — Alex, Apr 04 '18 at 15:40
@sklingler93 's fix worked! Thank you very much, I would love an explanation for that! Alex , Look at the end of my app.js , i've set custom delimeters since I'm also using Jinja - which uses the {{ }} syntax as well. — Ash42, Apr 04 '18 at 15:51
Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Emile Bergeron, Apr 04 '18 at 15:57

score 2 · Accepted Answer · answered Apr 04 '18 at 15:49

2

Include your app.js file in bottom of a body tag. When you are doing:

var app = new Vue({
el: '#app',

element with tag #app doesn't exist

answered Apr 04 '18 at 15:49

Oleksandr Oleksiv

638
1
6
10

1

Thanks for the explanation! Just pointing out that the fix was proposed first by @sklingler93 – Ash42 Apr 04 '18 at 16:20

Vue.js suddenly not working

1 Answers1