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

Posted 2023-02-22

技术标签:

【中文标题】页面呈现一秒钟然后消失 - Vue JS【英文标题】：Page renders for a second and then disappears - Vue JS 【发布时间】：2017-02-27 05:38:33 【问题描述】：

我是使用 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
                );
        
    
);

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

【问题讨论】：

我只是想分享一个提醒，Vue 的生产版本不会向控制台打印警告。您想使用 Vue 的开发版本来查看警告，以便更好地解决此问题。 【参考方案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 语法。

【讨论】：

就这样它正在工作！谢谢伙计，希望我能检查一下！祝你使用 Vue 好运，一旦你克服了学习阶段的最初挫折感，那就太好了。【参考方案2】：

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

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

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

【讨论】：

以上是关于页面呈现一秒钟然后消失 - Vue JS的主要内容，如果未能解决你的问题，请参考以下文章

NEXT JS 使用 Auth0 运行时错误，一秒钟后消失

显示一个 div 几秒钟然后自动消失

MFMailComposeViewController 出现一秒钟然后消失

Swift：表格单元格出现一秒钟然后消失

js点击弹出提示层2秒钟之后自动消失

尝试使用 pygame.display.update 在 pygame 中显示 png 文件，它显示不到一秒钟然后消失。