Vue JS webpackにXHRを追加する

Question

VueにXHRを追加しようとしています。 XHRが定義されていないというエラーが表示されます。私はNPHでインストールされたXHR命令に従って、エイリアスの下のwebpack.baseファイルに追加しました。 vue-cliボイラープレートに添付されているHello.vueファイルをテンプレートファイルの中で呼びます。私は "npm run dev"を使用しますが、何とか再構築する必要がありますか？

resolve: { 
extensions: ['.js', '.vue', '.json'], 
alias: { 
    'vue$': 'vue/dist/vue.esm.js', 
    '@': resolve('src'), 
    'request$': 'xhr' 
} 

}、タグ内部Hello.vueから

xhr({ 
uri: "http://localhost:8081/service", 
headers: { 
    "Content-Type": "application/json" 
} 

}, function (err, resp, body) { 
    list = resp; 
}) 

コードHello.vueに

<script> 
var xhr = require("xhr") 

var spells = []; 

function doGetSpells(){ 

     //var self = this; 
     xhr({ 
      uri: "http://localhost:8081/spellNames", 
      headers: { 
       "Content-Type": "application/json" 
      } 
     }, function (err, resp, body) {    
      spells = JSON.parse(body); 
      console.log(spells); 
     })   
} 

export default { 
    name: 'sideBar', 
    data() { 
    return { 
     msg: 'Welcome to Your Vue.js App', 
     spellList: spells 
    } 
    }, 
    methods: { 
    getSpells(){ 
     doGetSpells(); 
    }, 
    mounted() { 
     doGetSpells(); 
    } 
    } 

} 
</script> 

Answer 1

var xhr = require("xhr") 

xhr.get('/post-to-me', function(err, resp) { 
    // callback 
}) 

あなたはパラメータとしてコールバック関数を渡す必要がありますアクションが呼び出されたときに呼び出されます終わらせる。あなたのコールバックで

、あなたが使ってVueのインスタンスにアクセスできるようになります「この」：

this.spellList = []