Page renders for a second and then disappears – Vue JS

Asked By: Anonymous

I’m new to using Vue and am trying to build a simple search feature that takes an input query and returns all users that match the query.

I’m attempting to do this by following along to a video demonstration of it.

I have no clue where I am going wrong as there is no error in my console, however I am currently facing an issue where the page loads and I can see the content for a second and then it flashes white and the page goes blank.

The code for the page looks like this:

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

        https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js
        https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js

        http://assets/app.js

    </body>
</html>

And my app.js script looks like this:

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
                });
        }
    }
});

Where am I going wrong? Or what is causing this?


Solution

Answered By: Anonymous

There are a couple of things here. Firstly, you are using Vue 2.0. In vue 2.0 the v-on="submit:..."; syntax is deprecated (in fact it looks like this syntax is from 0.12). If you want to stop the form submitting, you now need to add v-on:submit.prevent:

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

You have a similar issue for v-on="keyup: search" which should be v-on:keyup="search"

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

It’s worth taking a look at the docs at: https://vuejs.org/guide/ to get familiar with the basic 2.0 syntax.


Windows 10 Kaufen Windows 10 Pro Office 2019 Kaufen Office 365 Lizenz Windows 10 Home Lizenz Office 2019 Home Business Kaufen Windows 10 Lisans Office 2019 Mac Satın Al follower kaufen instagram follower kaufen porno