2017-09-26 52 views
0

vuejs的新增功能。對屬性的異步更改

我有以下腳本(代碼縮短)一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; 
    }); 
    } 
}; 

在我.vue文件,我做這樣的事情:

<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

@肖恩沒問題:) – Bert