我想遍歷colorMenus陣列并將我的 v-model 系結到已經定義的資料元素headerColor和checkboxColor
我有這個簡化的代碼：
<v-card
v-for="(colorMenu, index) in colorMenus"
:key="index"
>
<v-row>
<v-col>
<p >{{ colorMenu.title }}</p>
</v-col>
<v-col cols="8">
<v-text-field
v-model="myModels.color[index]"
v-mask="mask"
hide-details
solo
></text-field>
</v-col>
</v-row>
</v-card>
我的資料如下所示：
export default {
data() {
return {
headerColor: '#1976D2FF',
checkboxColor: '#1976D2FF',
myModels: {
color: ['headerColor', 'checkboxColor']
},
colorMenus: [
{
title: 'HEADER:',
},
{
title: 'CHECKBOX:',
}
]
}
},
奇怪的是我可以得到這個，模型名稱，但它們前面有#？
uj5u.com熱心網友回復：
我認為那是因為您已經在該color陣列中定義了字串。您應該像這樣參考這些專案：
myModels: {
color: [this.headerColor, this.checkboxColor]
},
uj5u.com熱心網友回復：
我希望這有幫助。在 v- 中，由于某種原因，我無法從陣列中訪問名稱，但如果我通過 ANOTHER 物件的鍵訪問資料，則可以。不知道為什么，但它奏效了！這是固定代碼：
<v-card
v-for="(colorMenu, index) in colorMenus"
:key="index"
>
<v-row>
<v-col>
<p >{{ colorMenu.title }}</p>
</v-col>
<v-col cols="8">
<v-text-field
v-model="myModels[colorMenu.type]"
v-mask="mask"
hide-details
solo
></text-field>
</v-col>
</v-row>
</v-card>
然后是我的資料：
export default {
data() {
return {
headerColor: '#1976D2FF',
checkboxColor: '#1976D2FF',
myModels: {
headerColor: '#1976D2FF',
checkboxColor: '#1976D2FF',
},
colorMenus: [
{
title: 'HEADER:',
type: 'headerColor'
},
{
title: 'CHECKBOX:',
type: 'checkboxColor'
}
]
}
},
uj5u.com熱心網友回復：
使用計算屬性怎么樣？這個可行，你可以在這里試試
https://codesandbox.io/s/optimistic-herschel-7q4u54?file=/src/App.vue
data() {
return {
headerColor: "#1976D2FF",
checkboxColor: "#1976D2FF",
};
},
computed: {
myModels() {
return [this.headerColor, this.checkboxColor];
},
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/426719.html
標籤：Vue.js
下一篇：vuejs3多個插件