是否可以使用組件屬性作爲數據變量？

我已經在下面複製了我的當前代碼。我試圖動態生成表頭，這取決於我通過type作爲通道傳遞給我的tables組件（在我的示例中，數據數組的數據表和狀態就是我所知的）。是否可以使用組件屬性作爲數據變量？

我已經通過header計算值中的if語句完成了此操作，以返回適當的列表。

但是我想不必爲每個type添加額外的if報表。

有沒有一種方法可以利用type prop直接綁定到匹配的數據？

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

});

來源

2017-06-22 Jim Daily

如果您稍微更改了數據結構，則可以刪除if語句。

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

這裏是一個例子。

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>

來源

2017-06-22 15:31:52 Bert

這很有趣，比如不超過5分鐘前我幾乎完全一樣的主意，因爲你，但我不知道你有資格陣列的名單一樣，在您的數據（）部分。我看起來更像是我下面粘貼的內容，並且仍然存在問題。您的解決方案非常完美。我仍然在學習JS和Vue，這實際上只是讓我突破了路障，非常感謝！ 'headerFormats：[headerType：'積分榜'，標題：['Rank'，'Team'，'Wins'，'Losses']}， {headerType：'stats'，header：['Number'， 'Player'，'Position'，'RBI'，'HR']} ]' –

@JimDaily不客氣:)它不是真正的*限定*任何東西，它只是將數據屬性設置爲對象並使用它一本字典。你可以像你在評論中那樣使用一個數組，它會稍微慢一點。 – Bert

是否可以使用組件屬性作爲數據變量？

回答

相關問題