CODEWITHSUNDEEP
javascriptlaravelvue.js
Kenziiee Flavius
Kenziiee Flavius

Reputation: 1949

Vue js "Cannot read property 'get' of undefined" on get request

This error comes up in the log of both post and get requests. I am using laravel 5 and have pulled in vuejs and vue-resource in that order at the bottom of the page. But for some reason making any requests using this.$http.get or this.$http.post returns the error in the title.

scripts

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.0/vue-resource.min.js"></script>
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/scrolling-nav.js"></script>
    <script src="js/app.js"></script>

Js/app.js Code

new Vue({

    el: '#application',

    data: {

    },

    ready: function(){
        this.openModal();
    },

    methods: {
        openModal: function(){
            $('td').on('click', function(){
                if($(this).hasClass('not-month'))
                {

                }
                else
                {
                    var year = '2016';
                    var month = $(this).parent().parent().parent().parent().find('h4').text();
                    var day = $(this).text();
                    console.log(day + ' ' + month + ' ' + year);

                    this.$http.get('/test', function(response){
                       this.$set('test', response);
                    });

                }
            });
        }
    }

});

Upvotes: 2

Views: 9298

Answers (2)

dotsinspace
dotsinspace

Reputation: 691

in your component export default just paste following code.

import _Vue from 'vue';
import _VueResource from 'vue-resource';

// vue use vueResource for http request.
_Vue.use(_VueResource);

export default {
name :  'SearchField',
_this: this,
data() {
  return {
    contactNumber: []
  }
},
methods: {
  GetContact: function () {
    // GET /someUrl
    return this.$http.get('localhost:8081').then(response => {

      // get body data
      let someData = response.body;
      alert(someData);

    }, response => {
      // error callback
      alert("error")
    }).bind(_this);
  }
}
};

Upvotes: 0

Hammerbot
Hammerbot

Reputation: 16324

you are trying to use the this into a jQuery callback. You need to reference it before and use the reference like so:

openModal: function(){
    var instance = this;
    $('td').on('click', function(){
        if($(this).hasClass('not-month'))
        {

        }
        else
        {
            var year = '2016';
            var month = $(this).parent().parent().parent().parent().find('h4').text();
            var day = $(this).text();
            console.log(day + ' ' + month + ' ' + year);

            instance.$http.get('/test', function(response){
               instance.$set('test', response);
            });

        }
    });
}

Upvotes: 2

Related Questions