Question

我正在使用Vue.js，由于某种原因它刚刚停止工作。我似乎无法找到我的错误 - 已经看了几个小时。

这是我的HTML文件 - 只是依赖项和一个显示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>

这是app.js文件 - 它只是进入Vue实例，创建users数组，并运行更新users数组的AJAX请求。

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

结果非常令人失望 - 一切都是纯HTML。该表有两行 - 标题和一行<% user.xxx %>，就好像Vue不存在一样。

我想这意味着某些东西没有运行，虽然app.js本身确实在运行（我尝试添加console.log并且确实打印了）

希望你有好主意:)

Answer 1

将您的app.js文件包含在body标记的底部。当你这样做时：

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

标签#app的

元素不存在

Vue.js突然无法正常工作

1 个答案: