Javascript 页面呈现一秒钟，然后消失-Vue JS_Javascript_Laravel 5.2_Vue.js_Vue Resource

Javascript 页面呈现一秒钟，然后消失-Vue JS

javascript vue.js

Javascript 页面呈现一秒钟，然后消失-Vue JS,javascript,laravel-5.2,vue.js,vue-resource,Javascript,Laravel 5.2,Vue.js,Vue Resource,我不熟悉使用Vue，正在尝试构建一个简单的搜索功能，它接受输入查询并返回与查询匹配的所有用户我正试图通过以下方法来实现这一点我不知道我哪里出错了，因为我的控制台中没有错误，但是我目前面临一个问题，页面加载，我可以看到内容一秒钟，然后它闪烁白色，页面变空白页面的代码如下所示： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta id=

我不熟悉使用Vue，正在尝试构建一个简单的搜索功能，它接受输入查询并返回与查询匹配的所有用户

我正试图通过以下方法来实现这一点

我不知道我哪里出错了，因为我的控制台中没有错误，但是我目前面临一个问题，页面加载，我可以看到内容一秒钟，然后它闪烁白色，页面变空白

页面的代码如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta id="X-CSRF-TOKEN" content="{{ csrf_token() }}">
        <title>Laravel</title>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" />

    </head>
    <body>
        <div class="container" id="searchPage">

            <h1>Real Time Search</h1>

            <form class="form-horizontal" v-on="submit: false">
                <div class="form-group">
                    <label class="control-label">Search:</label>
                        <input type="text" class="form-control" v-model="query" v-on="keyup: search">
                </div>
            </form>

            <pre>@{{ $data | json }}</pre>

        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script>

        <script src="assets/app.js"></script>

    </body>
</html>

<!--This will stop the form from submitting -->
<form class="form-horizontal" v-on:submit.prevent>

我哪里做错了？或者是什么原因导致了这种情况？

这里有几件事。首先，您使用的是Vue 2.0。在vue 2.0中，

v-on=“提交：…”语法已被弃用（事实上，该语法似乎来自0.12）。如果要停止表单提交，现在需要添加v-on:submit.prevent
：
<!-- Call the search method on keyup -->
<input type="text" class="form-control" v-model="query" v-on:keyup="search">

为了熟悉2.0的基本语法，有必要在以下位置查看文档。
好的，另一个简单得多的答案。我刚刚花了几个小时试图解决同样的症状。原来我的问题是：

是的，我把“=”而不是“=”放在第二个条件上。现在在VB中，你永远不会有这个问题
我不确定为什么这会阻止整个页面在控制台中出现而不出现任何错误，但我必须说，总的来说，我很喜欢Vue JS（这是我第一次真正有效地编写客户端应用程序）。就这样，它工作了！谢谢，伙计，希望我能检查一下！祝Vue好运，一旦你克服了学习阶段的最初挫折，这将非常棒。我只想与大家分享一个提醒，Vue的生产版本不会在控制台上打印警告。您希望使用Vue的开发版本查看警告，以便能够更好地解决此问题。
<!-- Call the search method on keyup -->
<input type="text" class="form-control" v-model="query" v-on:keyup="search">