CODEWITHSUNDEEP
javascriptvue.jsfrontend
yarenska
yarenska

Reputation: 63

What is the purpose of this.$nextTick?

I'm new to Vue js and I'm trying to understand the logic of the usage of nextTick in a method. So I have two components 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 guncellenecekDetay = JSON.parse(JSON.stringify(detay));
        console.log("Popup:", guncellenecekDetay);
        this.$refs.isTuruIslemGoruntule.open({
          isUpdate: true,
          detay: guncellenecekDetay
        });
      }
    }
...
</script>

IsTuruIslemGoruntule.vue

<template>
...
<t-row>
      <t-col :span="20">
        <t-select
          id="sirket"
          ref="sirket"
          label="Şirket *"
          v-model="detay.sirket"
          item-value="id"
          item-text="aciklama"
        />
      </t-col>
    </t-row>
    <t-row>
      <t-col :span="20">
        <t-select
          id="cmb_durum"
          ref="durum"
          label="Durum"
          itemText="text"
          itemValue="id"
          v-model="detay.durumBaseDTO"
          :readonly="false"
          :clearable="true"
          :disabled="false"
        />
      </t-col>
....
</template>
<script>
...
methods: {
    open: function(options) {
      this.isOpen = true;
      if (options) {
        this.isUpdate = true;
        this.detay = JSON.parse(JSON.stringify(options.detay));
      } else {
        this.detay = {};
      }
      //this.$nextTick(() => {
      this.$refs.durum
        .get("/ytts/api/common/durumlar/aktifPasif", null)
        .then(data => {})
        .catch(err => null);

      this.$refs.islem
        .get("/ytts/api/tanimYonetimi/isTuruIslem/sorgula/islemListesi")
        .then(data => {})
        .catch(err => null);

      this.$refs.sirket
        .get("/ytts/api/tanimYonetimi/isTuruIslem/sorgula/sirketListesi")
        .then(data => {})
        .catch(err => null);
      //});
      //console.log("DETAY:", this.detay);
    },
...
</script>

My question is code as in this example doesn't work properly and I get "Cannot read property 'get' of undefined" at the line where this.$refs.durum exists. But when I uncomment the nextTick method which resides at the top of this.$refs.durum, it magically works. I really don't get the idea of this usage. Can someone clearly explain it to me? Thank you for your attention.

Upvotes: 0

Views: 247

Answers (1)

Decade Moon
Decade Moon

Reputation: 34306

If the <t-select ref="durum"> component is not created (by using v-if, for example) then this.$refs.durum won't exist.

Let's say you use something like v-if="show" with show set to false to control the creation of that component. If, in your method, you set show to true, then the component won't be created as soon as you do so, you have to wait until Vue has updated the DOM (this is a performance thing). For this, you need to use $nextTick to wait until that time, only then will the component be created and this.$refs.durum will exist.

You haven't provided all of your code, so I can't say for sure, but it looks like maybe isOpen is controlling the visibility of that component.

Upvotes: 2

Related Questions