Question

我刚才使用Vue并尝试构建一个简单的搜索功能，该功能接受输入查询并返回与查询匹配的所有用户。

我试图通过跟随它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

2 个答案: