我使用v-for. 我需要向我創建的每一列添加組件，每個組件都在單獨的列中。我view在腳本中創建，在其中存盤組件，但仍然無法將它們分別添加到每一列：
<template>
<v-container fluid>
<v-row dense>
<v-col
v-for="n in 2"
:key="n"
:cols="n === 1 ? 2 : 10">
<v-card outlined tile>
<component :is="view"></component>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
import XYZ from '../views/XYZ.vue';
import AAA from '../views/AAA.vue';
export default {
name: 'Project',
data: {
view: 'dynamic_views',
},
components: {
'dynamic_views': {
XYZ,
AAA
}
},
};
</script>
uj5u.com熱心網友回復：
將組件直接放在components選項中，然后創建一個名為componentNames您應該回圈遍歷它的資料屬性：
import XYZ from '../views/XYZ.vue';
import AAA from '../views/AAA.vue';
export default {
name: 'Project',
data:{
componentNames:['XYZ','AAA']
},
components: {
XYZ,AAA
},
};
在模板中：
<template>
<v-container fluid>
<v-row dense>
<v-col
v-for="(comp,n) in componentNames"
:key="n"
:cols="n === 1 ? 2 : 10">
<v-card outlined tile>
<component :is="comp"></component>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/370456.html
標籤：Vue.js Vuetify.js
下一篇：Vue3在函式內設定參考值