Seite macht für eine Sekunde und verschwindet dann wieder – Vue JS

Bin ich mit Vue und bin versucht, zu erstellen eine einfache Suchfunktion, die eine input-Abfrage aus und gibt alle Benutzer aus, die der Abfrage entsprechen.

Ich bin versucht, dies zu tun, indem Sie die folgenden zusammen video-demonstration es.

Ich habe keine Ahnung, wohin ich gehe falsch, da es keine Fehler in meiner Konsole, jedoch bin ich derzeit vor einem Problem, wo die Seite geladen wird und ich den Inhalt sehen kann für eine zweite und dann blinkt es weiß und die Seite ist leer.

Den code für die Seite wie folgt aussieht:

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

Und meine app.js Skript sieht wie folgt aus:

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

Wohin gehe ich falsch? Oder was ist die Ursache?

InformationsquelleAutor James | 2016-10-18



2 Replies
  1. 1

    Gibt es ein paar Dinge hier. Erstens, Sie sind mit Vue 2.0. In vue 2.0 die v-on="submit:..."; syntax ist veraltet (in der Tat, es sieht aus wie diese syntax wird von 0,12). Wenn Sie möchten, stoppen Sie das Formular Absenden, müssen Sie jetzt hinzufügen v-on:submit.prevent:

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

    Haben Sie ein ähnliches Problem für v-on="keyup: search" werden sollte v-on:keyup="search"

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

    Lohnt es sich einen Blick auf die docs an: https://vuejs.org/guide/, um sich mit der basic-2.0-syntax.

    • Und genau wie es funktioniert! Danke Kumpel, ich wünschte, ich hatte gedacht, dass zu überprüfen!
    • Viel Glück mit Vue, es ist toll, wenn Sie vorbei an den anfänglichen Frustrationen der Lern-phase.
  2. 0

    OK, eine andere, viel einfachere Antwort. Ich habe verbrachte ein paar Stunden versucht zu lösen die gleichen Symptome. Es stellt sich heraus, mein problem war dieses:

    Seite macht für eine Sekunde und verschwindet dann wieder - Vue JS

    Yup, ich würde setzen „=“ nicht „==“ auf die zweite Bedingung. Jetzt in VB würde Sie nie haben, hatte das problem …

    Ganz warum das hält die ganze Seite erscheinen, ohne Fehler in der Konsole, ich bin mir nicht sicher, aber ich muss sagen, in der Regel bin ich liebend Vue JS (für das erste mal kann ich eigentlich auch schreiben-client-Anwendungen produktiv).

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.