Tuesday, March 14, 2017

undefined property in vue 2 basic test

Hi i am trying to use Vue in a laravel app but i have some issues. Basically i need to retrieve data from a get request and build some results based on it. The problem is that i don't even get to correctly retrieve the data inside my array variable. I better explain

in my app.js i load my vue instance

Vue.component('search', require('./components/search.vue'));

const app = new Vue({
   el: '#app',
});

in my main.blade.php i insert my vue component

<search class="row expanded container"></search>

this is my vue file

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Example Conhenhmponent</div>

                    <div class="panel-body">
                        I'm an example component!

                        

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {

    data () {
        return {
            test:"this is my sample",
            results: []
        }
    },

    mounted () {
        console.log(this); // here my obj exists  
        console.log('Component mounted.') // it works
        axios.get("http://localhost:8000/api/search?q=qwfqw")
        .then(function(resp){
            if(typeof resp.data == 'string') {
                resp.data = JSON.parse(resp.data);
            }
            console.log(resp.data); // here the object exists
            this.results = resp.data;
        });
    }
}


</script>

The page loads but i get an error that says the results var is undefined. How can i fill my result var with the get data? what's the right way to do that?



via Debora8_8

Advertisement