如何动态添加组件到网格？

Question

我使用 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>

Answer 1

将组件直接放在 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>

如何动态添加组件到网格？

How to dynamically add components to grid?

vue.js

vuetify.js