Kann eine Komponenteneigenschaft als Datenvariable verwendet werden?

Ich habe meinen aktuellen Code unten kopiert. Ich versuche dynamisch Tabellenköpfen zu generieren, je nachdem, was type ich als Prop zu meiner tables Komponente überlasse (Stand und Status sind, was ich als die Datenfelder in meinem Beispiel habe).Kann eine Komponenteneigenschaft als Datenvariable verwendet werden?

Ich habe dies erreicht, indem Sie die if Anweisung im header berechneten Wert verwenden, um die richtige Liste zurückzugeben.

Ich möchte jedoch nicht zusätzliche if Anweisungen für jede type hinzufügen müssen.

Gibt es eine Möglichkeit, die ich die type prop nutzen kann, um direkt an die passenden Daten zu binden?

<div id="root" class="container"> 
    <tables type="stats"> 

    </tables> 
</div> 

Vue.component('tables', { 
    template: ` 
    <table class="table"> 
    <thead> 
     <tr> 
     <th v-for="headers in header">{{ headers }}</th> 
     </tr> 
    </thead> 
    <tfoot> 
     <tr> 
     <th v-for="footers in header">{{ footers }}</th> 
     </tr> 
    </tfoot> 
    <tbody> 
     <tr> 
     <th>1</th> 
     <td><a href="https://en.wikipedia.org/wiki/Leicester_City_F.C." title="Leicester City F.C.">Leicester City</a> <strong>(C)</strong> 
     <slot></slot> 
     </tr> 
    </tbody> 
    </table> 
    `, 

    data() { 
    return { 
     standings: ['Rank', 'Team', 'Wins', 'Losses'], 
     stats: ['Number', 'Player', 'Position', 'RBI', 'HR'] 
    }; 
    }, 

    computed: { 
    header() { 
     if (this.type == 'standings') { 
     return this.standings; 
     } else { 
     return this.stats; 
     } 
    } 
    }, 

    props: { 
    type: { required: true } 
    } 

});

Quelle

2017-06-22 Jim Daily

Wenn Sie Ihre Datenstruktur geringfügig ändern, können Sie Ihre if-Anweisungen entfernen.

data() { 
    return { 
     types:{ 
     standings: ['Rank', 'Team', 'Wins', 'Losses'], 
     stats: ['Number', 'Player', 'Position', 'RBI', 'HR'] 
     } 
    }; 
    }, 
    computed: { 
    header() { 
     return this.types[this.type] 
    } 
    }, 
    props: { 
    type: { required: true } 
    }

Hier ist ein Beispiel.

Vue.component('tables', { 
 
    template: ` 
 
    <table class="table"> 
 
    <thead> 
 
     <tr> 
 
     <th v-for="headers in header">{{ headers }}</th> 
 
     </tr> 
 
    </thead> 
 
    <tfoot> 
 
     <tr> 
 
     <th v-for="footers in header">{{ footers }}</th> 
 
     </tr> 
 
    </tfoot> 
 
    <tbody> 
 
     <tr> 
 
     <th>1</th> 
 
     <td><a href="https://en.wikipedia.org/wiki/Leicester_City_F.C." title="Leicester City F.C.">Leicester City</a> <strong>(C)</strong> 
 
     <slot></slot> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    `, 
 

 
    data() { 
 
    return { 
 
     types:{ 
 
     standings: ['Rank', 'Team', 'Wins', 'Losses'], 
 
     stats: ['Number', 'Player', 'Position', 'RBI', 'HR'] 
 
     } 
 
    }; 
 
    }, 
 
    computed: { 
 
    header() { 
 
     return this.types[this.type] 
 
    } 
 
    }, 
 
    props: { 
 
    type: { required: true } 
 
    } 
 

 
}); 
 

 
new Vue({ 
 
el: "#root" 
 
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script> 
 
<div id="root" class="container"> 
 
    <tables type="stats"> 
 

 
    </tables> 
 
</div>

Quelle

2017-06-22 15:31:52 Bert

Es ist schon komisch, wie nicht mehr als 5 Minuten hatte ich fast genau die gleiche Idee wie Sie, aber ich wusste nicht, dass Sie eine Liste von Arrays wie das in Ihren Daten qualifizieren könnten() Sektion. Meins sah ein wenig mehr wie das aus, was ich unten eingefügt hatte und immer noch Probleme damit hatte. Ihre Lösung ist perfekt. Ich lerne immer noch JS und Vue und das hat mich gerade an einer Straßensperre vorbeigeführt, vielen Dank! 'headerFormats: [ {headerType: 'standings', Kopfzeile: ['Rank', 'Team', 'Gewinne', 'Verluste']}, {headerType: 'stats', header: ['Number', "Spieler", "Position", "RBI", "HR"}} ] ' –

@JimDaily Gern geschehen :) Es ist nicht wirklich * qualifizieren * nichts, es ist nur eine Dateneigenschaft als ein Objekt festlegen und wie es verwenden ein Wörterbuch. Du könntest ein Array verwenden, wie du es auch in deinem Kommentar tust, es wäre nur etwas langsamer. – Bert

Kann eine Komponenteneigenschaft als Datenvariable verwendet werden?

Antwort

Verwandte Themen