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>