Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

162
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!