2017-09-26 11 views
0

vuejsの新機能。プロパティへの非同期変更

私は以下のスクリプト(コードを短縮)とVUE持っている:私の.vueファイルで

export default { 
    mixins: [asyncStatuses], 
    props: { 
    value: { type: Object } 
    }, 
    data() { 
    return { 
     statuses: [] 
    }; 
    }, 
    computed: { 
     hasStatuses() { 
      return this.statuses && this.statuses.length > 0; 
     } 
    }, 
    beforeMount() { 
    // This is an async call 
    this.getStatuses().then((response) => { 
     this.statuses = response.data.statuses; 
    }); 
    } 
}; 

を、私はこのような何かを:

<div v-if="hasStatuses"> 
    <div>Show a list of statuses</div> 
</div> 

問題が<div>決してショーですアップ。ステータスが正しくロードされています。私はcomputed.hasStatusesにデバッガを入れましたが、実行されることはありませんか?

どのように、なぜ、これが起こっているのか、どのように修正するのか説明できますか?

ありがとうございました!

+0

問題を再現できません。 https://jsfiddle.net/eptwaa9f/ 'console.log(response.data.statuses)'ならあなたは空でない配列を取得しますか? – thanksd

答えて

2

コードはself.statusesですが、selfは定義されていません。

self.statuses = response.data.statuses 

thisをそのまま使用してください。

this.statuses = response.data.statuses 
+0

コードが正しく更新されました。問題は依然として存在します。 – Sean

+0

コードを見てそれを修正してから、何らかの理由ですべてのサーバーを再起動する必要がありましたが、正常に動作しました。再度、感謝します! – Sean

+0

@Sean問題はありません:) – Bert

関連する問題