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

Question

我是 Vue 的新手，我正在尝试构建一个简单的搜索功能，该功能接受输入查询和 returns 所有匹配该查询的用户。

我正在尝试通过跟随它的 video demonstration 来做到这一点。

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

该页面的代码如下所示：

<!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>

我的 app.js 脚本如下所示：

Vue.http.headers.common['X-CSRF-TOKEN'] = document.getElementById('X-CSRF-TOKEN').getAttribute('content');

new Vue({

    el: '#searchPage',
    data: {

        query: '',
        users: [],

    },
    methods: {
        search: function() {
            this.$http.post('/', { query: this.query } ).then(function(response) {
                    console.log(response);
                }, function(response) {
                    // error callback
                });
        }
    }
});

我哪里错了？或者是什么原因造成的？

Answer 1

这里有几件事。首先，您使用的是 Vue 2.0。在 vue 2.0 中，v-on="submit:..."; 语法已被弃用（事实上，该语法似乎来自 0.12）。如果你想停止表单提交，你现在需要添加 v-on:submit.prevent:

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

您对 v-on="keyup: search" 也有类似的问题，应该是 v-on:keyup="search"

<!-- Call the search method on keyup -->
<input type="text" class="form-control" v-model="query" v-on:keyup="search">

值得一看的文档位于：https://vuejs.org/guide/ 以熟悉基本的 2.0 语法。

Answer 2

好的，一个不同的，更简单的答案。我刚刚花了几个小时试图解决相同的症状。原来我的问题是这样的：

是的，我会在第二个条件中使用“=”而不是“==”。现在 VB 你永远不会遇到那个问题......

这就是为什么这会阻止整个页面在控制台中显示而没有任何错误，我不确定，但我不得不说总的来说我喜欢 Vue JS（这是我第一次真正可以编写客户端应用程序富有成效地）。

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

Page renders for a second and then disappears - Vue JS

javascript

vue.js

laravel-5.2

vue-resource