es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo agregar dinámicamente componentes a una cuadrícula?

12 Jun, 2023 Programación

Creé una cuadrícula usando v-for. Necesito agregar componentes a cada columna que creé, cada uno en una columna separada. Creé view en el script, donde almaceno componentes, pero aún así no puedo agregarlos a cada columna por separado:

<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>
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para agregar componentes a cada columna, puede utilizar una propiedad calculada para generar un array de componentes basado en su variable view del script.

    Primero, debe modificar su script view para que sea un array de nombres de componentes en lugar de una cadena:

    data() {
  return {
    view: ['XYZ', 'AAA']
  }
},

    A continuación, puede crear una propiedad calculada que mapee sobre este array y genere un array de objetos de componente:

    computed: {
  componentsArray() {
    return this.view.map(componentName => {
      return {
        component: this.$options.components[componentName]
      }
    })
  }
}

    Luego, puede modificar su ciclo v-for para usar esta propiedad calculada y generar los componentes para cada columna:

    <v-col v-for="(componentObj, index) in componentsArray" :key="index" :cols="n === 1 ? 2 : 10">
  <v-card outlined="" tile="">
    <component :is="componentObj.component"></component>
  </v-card>
</v-col>

    Esto creará una columna separada para cada componente en su array view.

Comments are closed.