如何为v-for生成的grid网格列动态添加不同的独立组件

修正实现方案 #

调整后可直接运行的代码如下：

<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="componentList[n-1]"></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() {
    return {
      // 按列的先后顺序存储要渲染的组件名
      componentList: ['XYZ', 'AAA']
    }
  },
  // 直接注册需要用到的子组件，无需额外嵌套
  components: {
    XYZ,
    AAA
  },
};
</script>

关键修改说明 #

• 移除了原代码中错误嵌套的dynamic_views组件定义，直接把需要用到的子组件注册到当前实例的components选项下
• 新增componentList数组，和v-for生成列的顺序一一对应，存储每列要渲染的组件名称
• 模板中通过n-1获取当前列对应的数组下标，拿到对应组件名绑定到:is属性，实现每列渲染不同组件

后续需要新增更多列时，只需要在componentList里按顺序追加对应组件名，同时调整v-for的循环次数即可。

内容的提问来源于stack exchange，提问作者mustafa00