Vue JS AJAX計算されたプロパティ

Question

[OK]を、私は非常に私の最初の作業Vue JSアプリケーションを持っていると思うが、私は少しのつまずきの後に少しのつかまりを打つ。私はこれが最後の小さなものであることを願っています。 vue-async-computedとaxiosを使用して、私のAPIから顧客オブジェクトを取得しています。

次に、そのプロパティを子コンポーネントに渡し、{{customer.fName}}のような画面にレンダリングします。

私が見る限り、AJAX呼び出しが行われており、応答は戻ってくるはずです。問題はページに何もないので、顧客オブジェクトはAJAX呼び出し後に更新されないようです。ここで

は、私は部品が「顧客」と呼ばれる計算された性質を持っており、私が言ったように、私はネットワーク]タブで見ることができる、ということ

http://pastebin.com/DJH9pAtU

に取り組んでいますプロフィールページ.vueファイルです要求は行われており、エラーはありません。ページには何も結果を示さない、

{{customer.fName}} 

しかし：私は、ページにデータをレンダリングしています、そのコンポーネント内

<app-customerInfo :customer="customer"></app-customerInfo> 

：応答は、ここでは、子コンポーネントに送信されています。インスペクタでプロパティ "customer"の値を確認する方法はありますか？私は行方不明の何かが明らかですか？

Answer 1

私はVueを約1年半使っています。私は、非同期データの読み込みとその良いことを扱っている苦労を実感しています。ここでは、私はあなたのコンポーネントを設定する方法をです：

<script> 
export default { 

    components: { 
     // your components were fine 
    }, 

    data: function() { 
     return { 
     customer: {}, 
     } 
    }, 

    mounted: function() { 
     this.axios.get('/api/customer/get/' + this.$route.params.id) 
      .then(function(response){ 
      this.customer = response.data; 
      }.bind(this)); 
    } 
} 
</script> 

ので、私がやったことはコンポーネントがmountedを取得するときに、その後、サーバーにaxiosコールを送り、あなたのコンポーネントのデータ機能でcustomerを初期化しました。その呼び出しが返ったら、データにthis.customerを設定します。そして、私が上の私のコメントで言ったように、間違いなくVue's devtoolsをチェックアウトすると、変数やイベントを簡単に追跡することができます。

Answer 2

私はあなたのエラーが命名にあると信じていました。 vue-async-computedプラグインには、Vueオブジェクトの新しいプロパティが必要です。また、私は非同期関数はプロミスを返すが間違っている可能性があると信じています。

computed: { 
       customer: async function() { 
        this.axios.get('/api/customer/get/' + this.$route.params.id) 
        .then(function(response){ 
         return(response.data); 
        }); 
       } 
      } 

は次のようになります。

asyncComputed: { 
       return customer: async function() { 
        this.axios.get('/api/customer/get/' + this.$route.params.id) 
        .then(function(response){ 
         return(response.data); 
        }); 
       } 
      }