如何訪問/轉換element.varNamev-for 回圈中的字串以作為變數名傳遞以獲取此布林值的當前值。
在以下情況下：
<div v-for="(element, index) in elements" :key="index" :>
<div v-html="element.icon"></div>
{{element.name}}
</div>
el1: false,
el2: false,
selected: undefined,
elements: [
{
name: 'element 1',
icon: `<svg>
<path></path>
<rect></rect>
</svg>`,
shortName: 'el1',
varName: this.el1
},
/...
]
我的included類如何成為布林值而不是實際的字串，最初我嘗試使用如下shortName方式訪問它：
element.shortName
哪個不起作用，也嘗試過：
[element.shortName]
以及：
this[element.shortName]
似乎都不起作用，所以我嘗試通過將它添加到 object 中來包含對該變數的實際參考varName: this.el1，但這也不起作用。
我究竟做錯了什么？
uj5u.com熱心網友回復：
由于您在另一個中參考資料屬性，因此您應該將第二個屬性定義為計算屬性：
data(){
return {
el1: false,
el2: false,
selected: undefined,
}
},
computed:{
elements(){
return [
{
name: 'element 1',
icon: `<svg>
<path></path>
<rect></rect>
</svg>`,
shortName: 'el1',
varName: this.el1
}
]
}
}
uj5u.com熱心網友回復：
varName: this.el1選項內部沒有更新的原因data是因為它不是反應性的。
您可以在此處閱讀 Vue 官方檔案。
回到你的問題：
嘗試在生命周期掛鉤中分配整個elements陣列。mounted()因此，您可以訪問this.el1.
演示：
new Vue({
el:"#app",
data: {
el1: false,
el2: true,
elements: []
},
mounted() {
this.elements = [
{
name: 'element 1',
shortName: 'el1',
varName: this.el1
}, {
name: 'element 2',
shortName: 'el2',
varName: this.el2
}
]
}
});.included {
background-color: yellow
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(element, index) in elements" :key="index" :class="{included : element.varName}">
{{element.name}}
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/444697.html
上一篇：Vuejs只轉義某些HTML標簽