Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

172
Vistas
Component is re-rendered but submitted props go blank after re-render

I'm facing the following difficulty:

I'm calling a component(ListView) inside another component, passing some properties.

The first time the component is rendered, it goes through the Created hook, where I get some information to pass in the ListView's props.

The second time I render it, it's not calling created, so the data goes empty to the ListView.

I need it to work this way, because I'm building my dynamic menu, so when I change the menu, it has to go through the component and change its properties.

How can I proceed?

Attempts: 1 - Using :key 2 - forceUpdate

both unsuccessful

(Sorry, my English is bad)

Devices.vue

  <div >
    <ListView :key='$route.name'
        :domainName="domainName" 
        :metadataName="metadataName"
        :entityList="entityList"
        :metadataList="metadataList"
        :showBooleanAsFlag="true"
        :showButtonAddEntity="true"
        
      />

  </div>
</template>

<script>
import restService from "../../services/restService"
import ListView from "../../components/ListView/ListView.vue";
import {getCapitalizeFirstLetter} from '@core/utils/utils'


export default {
  components: {
    ListView,
  },
  data() {
    return {
      metadataName: '',
      domainName: '',
      metadataList: [],
      allMetadata: [],
      entityList: [],
    };
  },
   methods: {
     print(data){
       console.log('PRINT ', data)
       
     },
     async loadSettings(){
       
        var arrayOfRoute = this.$route.name.split('-');
    
        this.domainName = getCapitalizeFirstLetter(arrayOfRoute[1])
        this.metadataName = getCapitalizeFirstLetter(arrayOfRoute[2])
        
        await restService.getMetadata(this.domainName, this.metadataName ).then((response) => {
          this.metadataList = response.data.result.metadata;
        });

        await restService.getEntity(this.domainName, this.metadataName).then((response) => {
          this.entityList = response.data.result.entity;
        });
     }
  },
  
  watch:{
    async '$route' (to, from){
      console.log('WATCH!!!')
      this.loadSettings();
    }
  },
  created(){
    console.log('CREATED!!!')
    this.loadSettings();
  }

};
</script>

<style lang="scss">
</style>
about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda