残りのAPIからデータを返します

Question

残りのAPIからデータを取得しようとしています。ただし、this.someDataの結果は未定義のままです。

<template> 
    <div class="list"> 
    <h1>List</h1> 
    <pre>msg: {{msg}}</pre> 
    </div> 
</template> 

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

    export default { 
    name: 'list', 
    data() { 
     this.$http.get('http://localhost:8080/api/posts/filter?username=tons').then(response => { 
     // get body data 
     this.someData = response.body 
     console.log(this.someData) 
     }, response => { 
     // error callback 
     }) 

     return { 
     msg: this.someData + 'somedata' 
     } 
    } 
    } 
</script> 

誰もが私が間違ってやっているかについての手掛かりを持って次のように

私のコンポーネントがありますか？

Answer 1

'data'は単なるプロパティでなければなりません。何かを取得した後、あなたの 'データ'プロパティを設定する 'メソッド'があります。

正しいコードは次のようなものになります：あなたは「データ」で、いくつかの基本的な計算を行うことができ、権利であるが、彼らはsyncronousあるべき{{ someData }}

@Bert_Evans、あなたのテンプレートでは

<script> 
    export default { 
     data: function() { 
      return { 
       someData: null 
      } 
     }, 
     methods: { 
      getData: function() { 
       // fetch here 
       this.someData = response.body; 
      } 
     }, 
     mounted() { 
      this.getData(); // or trigger by click or smth else 
     } 
    } 
</script> 

をすることができますVueでは反応性が働くからです。