Kind Komponentendaten sind nicht bindend/Reagieren

Question

Ich habe eine Kindkomponente, die das Ergebnis aus einer Reihe von Suchergebnissen ist.

Snippet von der übergeordneten Vorlage:

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

unten ist das Kind (Ergebnis) Vorlage

<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> 

Jedes Ergebnis kann über eine Taste auf dem Ergebnis erweitert/geschlossen werden. Ich möchte jedoch alle Ergebnisse aus dem übergeordneten Template schließen können.

Wenn isActive == true die Ergebnisse erweitern, und falscher Kollaps. Ich initiiere isActive über eine Stütze closeAllServices, die auf false eingestellt wird.

Ich habe eine Schaltfläche, die, wenn sie Sätze geklickt closeAllServices = true

ich sehen kann (über den Vue-Panel in Chrome), dass die Stütze closeAllServices geändert wird, wenn die Schaltfläche geklickt wird, aber isActive ändert sich nicht.

Habe ich etwas verpasst?

Answer 1

Sie initialisieren nur isActive in Daten. Das bedeutet, dass es sich nicht ändert, wenn sich die Eigenschaft ändert.

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

Mit allem, was Sie gezeigt haben, würde ich wahrscheinlich allClosed in der Vorlage direkt Referenz gerade.

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

Wenn es eine andere Logik, die in geht, ob isActive wahr oder falsch ist Ihnen vielleicht ein berechnetes verwenden möchten.

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