• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

126
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 3 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 Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda