Twitter Bootstrap Question posted in

Page renders for a second and then disappears – Vue JS – Twitter bootstrap

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>

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

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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    OK, a different, much simpler answer. I’ve just spent a couple of hours trying to solve the same symptoms. It turns out my problem was this:

    enter image description here

    Yup, I’d put “=” not “==” on the second condition. Now in VB you’d never have had that problem …

    Quite why this stops the whole page appearing without any errors in the console, I’m not sure, but I have to say in general I’m loving Vue JS (for the first time I can actually write client applications productively).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search