是否可以使用组件属性作为数据变量？

问题描述：

我已经在下面复制了我的当前代码。我试图动态生成表头，这取决于我通过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 } 
    } 

});

答

如果您稍微更改了数据结构，则可以删除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>

这很有趣，比如不超过5分钟前我几乎完全一样的主意，因为你，但我不知道你有资格阵列的名单一样，在您的数据（）部分。我看起来更像是我下面粘贴的内容，并且仍然存在问题。您的解决方案非常完美。我仍然在学习JS和Vue，这实际上只是让我突破了路障，非常感谢！ 'headerFormats：[headerType：'积分榜'，标题：['Rank'，'Team'，'Wins'，'Losses']}， {headerType：'stats'，header：['Number'， 'Player'，'Position'，'RBI'，'HR']} ]' –

@JimDaily不客气:)它不是真正的*限定*任何东西，它只是将数据属性设置为对象并使用它一本字典。你可以像你在评论中那样使用一个数组，它会稍微慢一点。 – Bert

是否可以使用组件属性作为数据变量？

相关推荐