$nextTick()

Misol

<p> tegi ichidagi xabarni olishdan oldin DOM yangilanishini kutish uchun $nextTick() metodidan foydalanish.

methods: {
  updateMsg() {
    this.message = '"Hello! This is a new message."';
    this.results.push(this.$refs.pEl.textContent);
    this.$nextTick(() => {
      this.results.push(this.$refs.pEl.textContent + ' (using $nextTick())');
    });
  }
}

Misolni ishga tushirish »

Quyida ko‘proq misollarni ko‘ring.

Ta’rif va qo‘llanilishi

$nextTick() metodi bajarilishdan oldin DOM yangilanishini kutadi.

Joriy Vue komponentining DOM yangilanish sikli tugashini kutish uchun this.$nextTick() dan foydalanamiz.

Argument	Tavsif
callback funksiyasi	Ixtiyoriy. Berilgan callback funksiyasi DOM yangilangandan keyin ishga tushadi (yuqoridagi misolga qarang). $nextTick() metodidan argumentsiz ham foydalanish mumkin (quyidagi misolga qarang).

this.$nextTick() dan tashqari global nextTick() metodi ham mavjud bo‘lib, undan muayyan komponent doirasidan tashqarida ham DOM yangilanishini kutish uchun foydalanish mumkin.

Eslatma: Vue’da reaktiv o‘zgaruvchi o‘zgartirilganda DOM darhol yangilanmaydi. Buning o‘rniga Vue bu o‘zgarishlarni saqlab qo‘yadi va "next tick" (keyingi tik) sodir bo‘lganda ularni qo‘llaydi. Bu unumdorlikni oshirish hamda Vue nusxasi va DOM o‘rtasidagi muvofiqlikni ta’minlash uchun qilinadi.

Ko‘proq misollar

Misol

Birinchi misoldagi natijaga asinxron metod ichida $nextTick() metodini await prefiksi bilan chaqirish orqali ham erishish mumkin. Bunda keyingi kod satrlari "next tick" sodir bo‘lguncha kutib turadi.

<template>
  <h2>Example $nextTick() Method</h2>
  <p>Using "await $nextTick()", the next lines of code will also wait until the 'next tick' happens.
  </p>
  <div>
    <p ref="messageEl">{{ message }}</p>
    <button v-on:click.once="updateMsg">Update Message</button>
    <ol>
      <li v-for="x in results">{{ x }}</li>
    </ol>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Initial Message",
      results: []
    };
  },
  methods: {
    async updateMsg() {
      this.message = "Hello! This message is now updated.";
      this.results.push(this.$refs.messageEl.textContent);
      await this.$nextTick();
      this.results.push(this.$refs.messageEl.textContent + ' (after await $nextTick())');
    }
  }
};
</script>

<style scoped>
div {
  border: solid black 1px;
  padding: 10px;
}
</style>

Misolni ishga tushirish »

Tegishli sahifalar

JavaScript darsligi: JavaScript Async

Vue darsligi: Vue metodlari

Vue darsligi: Vue shablon reflari (template refs)

Vue darsligi: Vue v-on

Vue darsligi: Vue hodisa modifikatorlari

Vue ma’lumotnomasi: Vue ref atributi

Vue ma’lumotnomasi: Vue $refs obyekti

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish