pweil
1321
5
Vue

Vue-resource: cannot read property '$http' of undefined

Posted 3 years ago by pweil

'this' is a part of Vue.js that I can't seem to get straight. I've got a component that allows me to delete list items. But no matter how I try to call a vue-resource $http method, it gives me an uncaught TypeError: cannot read property '$http' of undefined.

My main.js file is being built via Laravel Elixir-Vueify. I am pulling in vue-resource, which is located in /resources/assets/js into main.js like this:

import Vue from 'Vue';
import Alert from './components/Alert.vue';
import Partners from './components/Partners.vue';

Vue.use(require('./vue-resource.min.js'));

In my Partners component, I have a delete method:

    methods: {

      deletePartner (index, partner) {
        // delete from database via ajax
       this.vm.$http.delete('/partners/' + partner.id)
            // then remove item from list in view
            .then(self.list.$remove(index))
            .catch(this.onError.bind(this));
      }

This is what used to work before I was using Vuify (see the Laracast lesson on asynchronous forms). I've tried called $http as 'this.$http', and the same thing happens. I know that I don't fully understand what governs the usage of 'this' or 'this.vm'. But what is the correct way to call an $http method? Or am I pulling vue-resource in incorrectly?

Please sign in or create an account to participate in this conversation.