VUEとRESTのAPI

Question

からデータvue.jsで遊んでいる間、私はAPIからのページデータを表示しようとしたときに、いくつかの奇妙な行動に気づいたが、ここでは奇妙なことだ：VUE 2.0.0を使用して

• 私は "タイトル"を見ることができますが、私はdevのコンソールにエラーがあります[printscreenを参照してください]
• 最新のvueのバージョンを使用して、私は "タイトル" [私はprintscreenで同じエラーが表示されません]

これは正常ですか？

ソースコード：

template: 
    '<div>'+ 
     'Form with id = {{id}}'+ 
     '<br/>'+ 
     'has title = {{item.details.Title}}'+ 
    '</div>', 
    data: function(){ 
    return { 
     id: '', 
     item: {} 
    } 
    }, 
    created: function() { 
    this.get() 
    }, 
    methods: { 
    get: function() { 
     var self = this 
     id = window.location.hash 
     id = id.replace('#/whatever/','') 
     axiosInstance.get('/thebackendresource/'+id) // <--- make http calls etc 
     .then(function (response) { 
      self.id = id 
      self.item = response.data 
      console.log(self.item) 
     }).catch(function (error) { 
      console.log(error) 
     } 
    ); 
    } 
    } 

Answer 1

あなたはこのエラーを取得している、あなたはaxiosinstanceからデータをフェッチしているとき、その時item.detailsがnullであり、それはレンダリングしようとすると、このエラーがスローされますので、 。

api呼び出しが完了すると、DOMが更新され、DOMが再レンダリングされるので、item.details.Titleがレンダリングされます。

template: 
'<div>'+ 
    'Form with id = {{id}}'+ 
    '<br/>'+ 
    '<span v-if="item.details"> has title = {{item.details.Title}}'+ 
    '</span>' + 
'</div>',