Vueify mit Vue-Ressource

Question

Ich kann nicht scheinen, Vue-Ressource mit Vueify zu arbeiten. Ich habe eine Vue-Komponente definiert, die ich in meine main.js-Datei einfüge.

import Vue from 'vue' 
import MyComponent from './my-component.vue' 

new Vue({ 
    el: '#app', 
    components: { 
     myComponent: MyComponent 
    } 
}); 

Meine vue Komponentendatei sieht wie folgt aus:

<script> 
    import Vue from 'vue'; 
    // import VueResource from 'vue-resource' 
    // Vue.use(VueResource); 

    export default { 
     template: '#my-component-template', 

     created:() => { 
      Vue.$http.get('/my/api/123', 
       data => { 
        console.log(data) 
       }, err => { 
        console.log("Error"); 
        console.error(err); 
       } 
      ); 
     } 
    } 
</script> 

Im aktuellen Zustand, ich diese Fehlermeldung:

Uncaught TypeError: Cannot read property 'get' of undefined 

Wenn ich die beiden Zeilen auf Kommentar über vue -resource in meiner Komponentendatei, der Fehler, den ich erhalte, dreht sich wie folgt:

Uncaught TypeError: Cannot redefine property: $url 

package.json:

{ 
    "private": true, 
    "scripts": { 
    "prod": "gulp --production", 
    "dev": "gulp watch" 
    }, 
    "devDependencies": { 
    "bootstrap-sass": "^3.3.6", 
    "gulp": "^3.9.1", 
    "laravel-elixir": "^5.0.0", 
    "laravel-elixir-vueify": "^1.0.3", 
    "vue": "^1.0.25", 
    "vue-resource": "^0.8.0" 
    } 
} 

Gulpfile:

var elixir = require('laravel-elixir'); 
require('laravel-elixir-vueify'); 

elixir(function(mix) { 
    mix.browserify('main.js'); 
}); 

Alle bestehenden Antworten auf SO keine Ergebnisse gebracht haben. Bitte helfen Sie.

Answer 1

Sobald Sie das Plugin unter main.js mit Vue.use(VueResource) hinzugefügt haben, fügt es allen Vue-Instanzen das Attribut $http hinzu. Sie müssen es in Ihrer Komponentendatei nicht erneut durchführen. Dann nutzen Sie einfach this.$http:

created:() => { 
     this.$http.get('/my/api/123', 
      //... 
     ); 
    } 

Answer 2

haben Sie versucht var VueResource = require('vue-resource'); in Ihrem Root-vue-Instanz hinzufügen? fügen Sie auch Vue.use(VueResource) hinzu.

Answer 3

sollten Sie ersetzen die $http mit http:

import Vue from 'vue' 
import VueResource from 'vue-resource' 

Vue.use(VueResource) 

export default { 
    created:() => { 
    Vue.http.get(...) 
    } 
} 

Außerdem ist es eine gute Praxis, die VueResource in die main-Datei zu installieren und dann könnten wir die this Schlüsselwort wie @ Jeff sagte.

Um das zu erreichen, sollten Sie die arrow function ändern, weil this auf das globale Objekt verweist:

// refers to the global object 
created:() => {} 

// refers to the Vue component 
created() { 
    this.$http.get(...) 
}