VueJS +残りのAPIリストレンダリングの問題

私はSpring Data Restバックエンドとsrc/main/resources/static html + jsアセットを使用しています。私の問題は、インターフェイスでWebサービスからデータを取得する方法を理解できないことです。VueJS +残りのAPIリストレンダリングの問題

データを明示的に配列として設定する場合、正常に動作します（https://vuejs.org/v2/guide/list.html参照）。

ありがとうございます！

... 
const ListFormsApi = { 
    template: '<div><ul><li v-for=\'item in items\'>{{item.details.Title}}</li></ul></div>', 
    data: function(){ 
    return { 
     items: '' 
    } 
    }, 
    created: function() { 
    this.get() 
    }, 
    methods: { 
    get: function() { 
     axiosInstance.get('/contactTemplate') 
     .then(function (response) { 
      this.items = response.data._embedded.contactTemplate 
     }).catch(function (error) { 
      console.log(error) 
     } 
    ); 
    } 
    } 
} 
...

Webページがドキュメントの例から、非常にシンプルで簡単です（あなたが（.thenを登録している場合...完全なHTMLやheadタグが同様に存在していることを

<body> 

    <div id="app"> 
     <h1><router-link to="/">ContactForm Factory!</router-link></h1> 
     <p> 
     <router-link to="/foo">Go to Foo</router-link> 
     <router-link to="/bar">Go to Bar</router-link> 
     <router-link to="/listForms">List Forms</router-link> 
     <router-link to="/listFormsApi">List Forms API</router-link> 
     </p> 
     <router-view></router-view> 
    </div> 

    <script src="https://unpkg.com/vue/dist/vue.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script> 
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
    <script src="app.js"></script> 


    </body>

出典

2016-12-02 cristi _b

thenのブロック内にこの範囲がないと思われるので、これを実行するには次のように変更する必要があります。

methods: { 
    get: function() { 
    var self = this 
    axiosInstance.get('/contactTemplate') 
     .then(function (response) { 
     self.items = response.data._embedded.contactTemplate 
     }).catch(function (error) { 
     console.log(error) 
     } 
    ); 
    }

同様の問題hereで私の答えを見ることができます。

出典

2016-12-02 16:42:42 Saurabh

あなたはお金の上にいた、ありがとう！ –

を想定）コールバック機能変更のコンテキストが。

コンテキストを維持するためには、bindメソッドを使用することができます。

methods: { 
    get: function() { 
    axiosInstance.get('/contactTemplate') 
     .then(function (response) { 
     this.items = response.data._embedded.contactTemplate 
     }.bind(this)) // added .bind 
     .catch(function (error) { 
     console.log(error) 
     }); 
    } 
}

出典

2016-12-02 16:10:34

私は明日それを試すことができました、saurabhが提案した解決策は期待どおりに機能しました –

VUE-リソースになりましたので、以下のように更新するように見えるというdataよりresponse.bodyを使用している：私はまた、あなたが反応性のあるデータセットを確保するためにthisとthis.$setの範囲を修正するために矢印構文を使用しました

methods: { 
    get: function() { 
    axiosInstance 
     .get('/contactTemplate') 
     .then((response) => { 
     this.$set(this.$data, 'items', response.body._embedded.contactTemplate) 
     }) 
     .catch((error) => { 
     console.log(error) 
     }); 
    } 
}

を。

これでも依然として希望の結果が得られない場合は、データがエンドポイントから正しく戻ってきていることを確認します。 Vue-resourceには、たとえばサーバが不正なコンテンツタイプで応答した場合に利用可能なメソッドresponse.json()があります。

出典

2016-12-02 16:39:37 GuyC

vue-resourceが放棄される可能性があるので、この時点でvue-resourceを使用しないことを決定しました。 axios via https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4#.s2rc283t0 –

VueJS +残りのAPIリストレンダリングの問題

答えて

関連する問題