Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

164
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda