I'm a beginner with Vue.js and I'm trying to wrap my head around the logic of using nextTick in a method. I have two components set up like this:
IsTuruIslem.vue
<template>
...
<t-row>
<is-turu-islem-goruntule ref="isTuruIslemGoruntule"
@kaydet="kaydet"
@guncelle="guncelle">
</is-turu-islem-goruntule>
</t-row>
...
</template>
<script>
...
isTuruIslemPopupAc(detay) {
if (!detay) this.$refs.isTuruIslemGoruntule.open();
else {
let updatedDetail = JSON.parse(JSON.stringify(detay));
console.log("Popup:", updatedDetail);
this.$refs.isTuruIslemGoruntule.open({
isUpdate: true,
detail: updatedDetail
});
}
}
...
</script>
IsTuruIslemGoruntule.vue
<template>
...
<t-row>
<t-col :span="20">
<t-select
id="sirket"
ref="sirket"
label="Company *"
v-model="detail.company"
item-value="id"
item-text="description"
/>
</t-col>
</t-row>
<t-row>
<t-col :span="20">
<t-select
id="cmb_status"
ref="status"
label="Status"
itemText="text"
itemValue="id"
v-model="detail.statusBaseDTO"
:readonly="false"
:clearable="true"
:disabled="false"
/>
</t-col>
....
</template>
<script>
...
methods: {
open: function(options) {
this.isOpen = true;
if (options) {
this.isUpdate = true;
this.detail = JSON.parse(JSON.stringify(options.detail));
} else {
this.detail = {};
}
//this.$nextTick(() => {
this.$refs.status
.get("/ytts/api/common/status/activeInactive", null)
.then(data => {})
.catch(err => null);
this.$refs.process
.get("/ytts/api/definitionManagement/process/query/processList")
.then(data => {})
.catch(err => null);
this.$refs.company
.get("/ytts/api/definitionManagement/process/query/companyList")
.then(data => {})
.catch(err => null);
//});
//console.log("DETAIL:", this.detail);
},
...
</script>
In the provided code example, I am encountering issues where the code doesn't work properly and throws an error "Cannot read property 'get' of undefined" at the line containing this.$refs.status. However, when I uncomment the nextTick method located above this.$refs.status, everything magically starts working. I'm struggling to grasp the reason behind this usage. Could someone provide a clear explanation? I appreciate your attention.