子組件數據沒有綁定/反應

Question

我有一個子組件，它是一組搜索結果的結果。

片段父模板：

<result v-for="result in search_results" :item="result" :closeAllServices="closeAllServices"></result> 

下面是孩子（結果）模板

<template> 
    <service v-if="isActive" :serviceId="item.id"></service> 
</template> 

<script> 
import showService from './show-service'; 

export default { 
    components: { 
    showService 
    }, 
    props: ['item', 'allClosed'], 
    data() { 
    return { 
     isActive: this.allClosed, 
    } 
    } 
} 
</script> 

每個結果可擴展/通過對結果的按鈕倒塌。但是，我希望能夠關閉父模板的所有結果。

當isActive == true結果展開，並虛假崩潰。我通過設置爲false的道具closeAllServices啓動isActive。

我有一個按鈕，其中，當（在Chrome經由Vue的面板）點擊套closeAllServices = true

我可以看到，被點擊的按鈕時，支柱closeAllServices被改變，但isActive不會改變。

我錯過了什麼嗎？

Answer 1

您只是初始化數據中的isActive。這意味着當財產變化時它不會改變。

data() { 
    return { 
    // This only ever executes when the component is created 
    isActive: this.allClosed, 
    } 
} 

有了你已經證明一切，我很可能只是在模板引用allClosed直接。

<service v-if="allClosed" :serviceId="item.id"></service> 

如果有進入isActive是真還是假，你可能需要使用一個計算的一些其他邏輯。

computed:{ 
    isActive(){ 
    return this.allClosed //plus whatever other logic to determine isActive 
    } 
}