Vue ile Component'e Veri Gönderme Sorunu
Herkese merhaba,
Benim bir Vue Componentim var. Parent Component üzerinden içerisine props yöntemini kullanarak DB üzerinden çektiğim bilgileri bir Array aracılığı ile bu componente aktarıyorum. Fakat bilgiler her defasında gelmesine rağmen bir türlü component stabil bir şekilde verileri göstermiyor. Bazen gösteriyor bazen göstermiyor.
Nedeni ne olabilir? Yardımcı olabilir misiniz? Aramadığım yöntem yer kalmadı.
Yardımlarınız için teşekkür ederim.
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (2)
Çok zaman geçmiş bir soru fakat belki yeni görenler için bir fikir vermesi açısından yazıyorum. Vue da component çağırıldığında gösterilmesi gereken verileri bir kaç yöntemle işleyebiliriz. Bunlar "created", "mounted" ve bazen "watch". created, component oluştuğunda tetiklenir ve fonksiyonlar, veriler işlenip gösterilir. Fakat DOM'u beklemez bu yüzden HTML tarafı için geç kalabilir. mounted ise DOM ile bağlantılı şekilde tetiklenir ve DOM işlemlerini sorunsuz gösterir. Ayrıca mounted içerisinde başlatılması için tanımladığım fonksiyonlar async ile düzenlenebilir. Bunlar da sorunumuzu çözmediyse flag (bayrak) dediğimiz yapı kullanılabilir. Bir boolean değişken tanımlanıp false ve true durumları oluşturarak componentin o şekilde render edilmesi sağlanabilir.
Merhaba,
ilk olarak burada Componentlerin ve JavaScript'in çalışma prensibini bilmek gerekiyor. İlk başta aslında cevabı vermişsin :) Sen DB üzerinden bir bilgiyi çekerken ister Axios kullan ister Vue-Resource farketmez orada bir asenkron iletişim yapıyorsun.Yani cevabın ne zaman geleceğini bilmiyorsun. Child Componentin ise bu cevabi beklemeden doğal olarak create oluyor.
Bu noktada bu Parent componentten gelen bilgileri sen eğer created metodunda alıp işliyorsan, sen bilgileri DB üzerinden önce child component üretildiği için veriler bazen gözüküyor bazen gözükmüyor.
Şöyle gösterme çalışayım bazı durumlarda;
DB üzerinden verilerin gelme süresi : 1ms
Child componentin create olma süresi : 0.001ms
iken bazı durumlarda;
DB üzerinden verilerin gelme süresi : 0.0001ms
Child componentin create olma süresi : 0.01ms
Üstteki senaryoda, DB üzerinden bilgiler 1ms de gelirken Component 0.001ms de üretilmiş. Yani DB den çok çok önce. Component create olurken props ile gönderdiğin Array boş olduğu için veri göstermiyor.
Alttaki senaryoda ise, DB üzerinden gelen bilgiler Component'in create olmadan çok önce hazır olduğundan dolayı, props ile göndermiş olduğun Array dolu dolayısıla Componentin bu bilgileri gösterebiliyor.
Bunu atlatmak için parent component içinde şunu yapabilirsin;
<template>
<div>
<comp v-if="loaded" :products="componenteGidecekOlanArray" />
</div>
</template>
<script>
export default {
data(){
return {
componenteGidecekOlanArray : [],
loaded : false
}
},
created(){
axios.post("url", {}).then(response => {
this.componenteGidecekOlanArray = response.data.products; // Diyelim...
this.loaded = true;
})
}
}
</script>
Buradaki en önemli nokta loaded isimli property. loaded ilk başta false olduğu için componentin gözükmeyecek. DOM üzerinde yer bile almayacaktır. Bu yüzden child üzerinde created metodu çalışmayacak ve bilgi göstermeye çalışmayacaktır child component.
Fakat sen parent içinde veriyi çektikten sonra this.loaded=true
ile beraber bu componentin üretilmesini söyleyerek ekranda gözükmesini sağlayacaksın.
Ekranda gözükürkende verilerin olduğu array çoktan hazır olduğu için doğal olarak verilerin gözükecektir
Umarım yardımcı olur :)