watch
Misol
<input type="range"> yordamida 20 dan 70 gacha bo‘lgan qiymatlarni tanlab bo‘lmaydigan qilish uchun watch opsiyasi ichidagi kuzatuvchidan (watcher) foydalanish.
export default {
data() {
return {
rangeVal: 4
};
},
watch: {
rangeVal(val) {
if( val>20 && val<70) {
if(val<40){
this.rangeVal = 20;
}
else {
this.rangeVal = 70;
}
}
}
}
};
Ta’rif va qo‘llanilishi
watch opsiyasi — Vue nusxasida e’lon qilingan barcha kuzatuvchilarni (watchers) o‘z ichiga olgan obyekt.
Kuzatuvchi (watcher) — data xususiyati yoki computed xususiyat bilan bir xil nomga ega funksiya. Shu nomdagi xususiyat o‘zgargan har safar kuzatuvchi avtomatik ravishda chaqiriladi.
Kuzatuvchi chaqirilganda, yangi va oldingi qiymatlar kuzatuvchi funksiyasiga argument sifatida mavjud bo‘ladi.
Kuzatuvchi tiger.weight kabi nuqta bilan ajratilgan yo‘l ham bo‘lishi mumkin; bunda kuzatuvchi faqat tiger obyektining weight xususiyati o‘zgarganda chaqiriladi.
Eslatma: Kuzatuvchilarni (watchers) e’lon qilishda arrow funksiyalardan foydalanmaslik kerak, chunki bunday funksiya ichidan this kalit so‘zi orqali Vue nusxasiga murojaat qilib bo‘lmaydi.
Obyekt sintaksisi yordamida kuzatuvchilarni yozishda (quyidagi misolga qarang) quyidagi opsiyalar mavjud:
| Opsiya | Tavsif |
|---|---|
| handler | Kuzatuvchi (watch) funksiyasi shu yerda yoziladi. |
| "metod nomi" | Kuzatuvchini (watcher) metod nomini string sifatida berish orqali shu metodni chaqiradigan qilib sozlash mumkin. |
| deep | Standart qiymati "false". Agar kuzatuvchi deep bo‘lsa, u kuzatish uchun sozlangan xususiyatning ichki qismlaridagi o‘zgarishlarga ham javob beradi. |
| immediate | Standart qiymati "false". Kuzatuvchini yaratilgandan so‘ng darhol ishga tushiradi. "immediate" "true" ga o‘rnatilganda, kuzatuvchi birinchi marta ishga tushganida eski qiymat "undefined" bo‘ladi. |
| flush | Standart qiymati "pre". callback funksiyasi komponentning render qilinishiga nisbatan qachon ishga tushishini belgilaydi. Mumkin bo‘lgan qiymatlar: "pre", "post" va "sync". Ushbu flush opsiyasidan ehtiyotkorlik bilan foydalaning. |
| onTrigger/onTrack | Debug qilish uchun ishlatiladi. Faqat ishlab chiqish (development) rejimida ishlaydi. |
Eslatma: Kuzatuvchilarni $watch() metodi yordamida ham yaratish mumkin.
Ko‘proq misollar
Misol
Obyekt sintaksisi bilan kuzatuvchidan foydalanish.
<template>
<h2>Example watch Option</h2>
<p>The 'rangeVal' watcher is written with the object syntax, with immediate: true, so that rangeVal is moved to '70' when the page first loads:</p>
<input type="range" v-model="rangeVal">
<p>rangeVal: <span>{{ rangeVal }}</span></p>
</template>
<script>
export default {
data() {
return {
rangeVal: 40
};
},
watch: {
rangeVal: {
handler(val) {
if (val > 20 && val < 70) {
if (val < 40) {
this.rangeVal = 20;
}
else {
this.rangeVal = 70;
}
}
},
immediate: true
}
}
};
</script>
<style>
span {
padding: 3px;
font-weight: bold;
font-family: 'Courier New', Courier, monospace;
background-color: lightgreen;
}
</style>
Tegishli sahifalar
Vue darsligi: Vue kuzatuvchilari (watchers)
Vue darsligi: Vue v-model direktivasi
Vue ma’lumotnomasi: Vue $watch() metodi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!