undefined property in vue 2 basic test

Question

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!

                        {{test}}

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

Possible duplicate of [Axios and VueJS, function(response) is not setting a list](http://stackoverflow.com/questions/42039714/axios-and-vuejs-functionresponse-is-not-setting-a-list) — Saurabh, Mar 14 '17 at 16:34

score 1 · Answer 1 · answered Mar 14 '17 at 15:59

It's a scoping issue. In your code the this inside the callback refers to the function itself, not the vue instance, so it's undefined. To resolve this you should use an arrow function (Laravel will already have ES6 correctly configured) which will ensure this refers to the vue instance:

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

score 0 · Answer 2 · answered Mar 14 '17 at 15:59

this in javascript is determined by what called the function and not where it is defined. One way to resolve your problem is to store a reference to this in another variable using var self = this; and then reference the results like self.results = resp.data;

Another way to use the bind function, Arrow functions. With arrow functions the scope of this changes to where it defined lexically.

mounted () {
        var self = this;
        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
            self.results = resp.data;
        });
    }

undefined property in vue 2 basic test

2 Answers2