HablemosDeVueJS / doctor-vue

Resolución de problemas que ocurren al desarrollar en VueJS
2 stars 1 forks source link

¿Cómo cargar dinamicamente el <template v-slot:item.atributo="{ item }"> de una Datatable de Vuetify #12

Open gvalmana opened 4 years ago

gvalmana commented 4 years ago

Vue-nos días grupo tengo una jerarquia de componentes en mi aplicación de la siguente manera

<Contenedores/>
---<Datatable/>
<Cargas/>
---<Datatable/>
<Guias/>
---<Datatable/>

Los tres componentes pasan por props al Data table los headers, los metodos, y otros datos especificos, mi modelo viende de la API tiene ciertos campos que necesito destacar como son el tiempo de estadia de los contenedores, el timpo que lleva la carga desagrupada y el tiempo que llevan las guias aeras liberadas, esos ademas de otros datos numeros, mi idea es poder pasar un

<template v-slot:item.edad="{ item }">
    <v-chip :color="getColor(item.edad)" dark>{{ item.edad }}</v-chip>
</template>

De forma dinamica mediante props para que la Datatable cargue los que yo le paso, mi codigo es el siguiente:

    <component 
      v-bind:is="componenteOpcional" 
      v-if="columnas"
    >

y esta importado mediante un computed de la siguiente manera

    componenteOpcional() {
      return ()=>import (`@/components/${this.columnas}`)
    }, 

y las propiedades del color se calculan asi

      getColor (valor) {
        console.log(valor)
        if (valor > 16) return 'red'
        else if (valor > 11) return 'orange'
        else return 'green'
      }, 

la cuestion es que no se muestran los cambios que estan en el metodo que genera el color sin embargo si pongo todos los templates v:slot si los muestra independientemente de la datatable que ese este cargando, saludos

rolandoesc commented 4 years ago

¿Estás utilizando slots para poder enviar los valores de tu datatable al componente opcional?

Por lo que me has dicho, esto puede ser un approach https://stackoverflow.com/questions/53430731/vuejs-nested-slots-how-to-pass-slot-to-grandchild

gvalmana commented 4 years ago

¿Estás utilizando slots para poder enviar los valores de tu datatable al componente opcional?

Por lo que me has dicho, esto puede ser un approach https://stackoverflow.com/questions/53430731/vuejs-nested-slots-how-to-pass-slot-to-grandchild

mas bien lo que quiero es usar el opcional para mandar los slots de items