[]
Javascript sorusu. Obje içindeki alt itemların üstten veri alabilmesi?
Merhabalar, şu sorunumu ekipteki ve dışarıdan olmak üzere 2 frontendci arkadaşa gösterdim çözüm üretemedik.
ibb.co
Bizim bu şekilde bir js dosyamız var. Bunu yandan açılan bir filter modal kullanırken, içerisindeki input componentleri oluşturmak için kullanıyoruz.
Burada ne kadar farklı item varsa alt alta select input veya text inputlar oluşuyor işte type ına göre artık.
Inputlar başka yerde tanımlı custom component olarak. Bunların bazı özellikleri var mesala autocomplete olarak bir şey aratıp seçmeleri gereken durumda, input a tıklandığında altındaki text alanına ne girilirse validation a gönderilen bir obje içindeki input alanına düşüyor. Oradan onu okuyup validation fonksiyonu içinde istek atıyorum. Dönen sonucu da this.externalSource a setleyerek dropdown ı dolduruyorum.
Çünkü o açılır menünün datası da o değişkenden okunuyor.
Buraya kadar her şey normal.
Bu arada screen js içinde watch ile bu alanları dinliyoruz, filtrele butonuna basıldığında bir değişiklik varsa sayfadaki datayı güncellemek için istek atıyoruz. Bazı durumlarda customer ve platform bu screen js den geliyor. O durumda da bu attığım filterData js indeki yukarıdaki fonksiyona datasını gönderip aşağıya setliyoruz.
Yani objenin herhangi bir yerinden alttakilere erişmeniz kolay zaten onu yapıyoruz görselde gördüğünüz gibi.
Fakat şimdi yeni bir case geldi. Dediler ki Platform seçildikten sonra ona göre customer aratılırlen o platform id yi göndermek gerek.
Yani ben yine customer validation ı içerisinde isteğimi atıcam yazılan text i string olarak ama aynı zamanda üstteki elemanın lValue suna ihtiyacım var.
Selected olanlar lValue ya yazılıyor.
Fakat ben mesela this. dediğimde, kendisini görüyor. Yukarıyı görmüyor ki?
Obje içinde olmasam bu scope farkı durumlardında, en dışa erişebilmek için oraya const self = this; yapıyorduk, self e erişiyorduk.
Ama burada bir türlü üstteki elemana erişemedik bu nasıl sağlanabilir mevcut yapıda?
ibb.co
Bizim bu şekilde bir js dosyamız var. Bunu yandan açılan bir filter modal kullanırken, içerisindeki input componentleri oluşturmak için kullanıyoruz.
Burada ne kadar farklı item varsa alt alta select input veya text inputlar oluşuyor işte type ına göre artık.
Inputlar başka yerde tanımlı custom component olarak. Bunların bazı özellikleri var mesala autocomplete olarak bir şey aratıp seçmeleri gereken durumda, input a tıklandığında altındaki text alanına ne girilirse validation a gönderilen bir obje içindeki input alanına düşüyor. Oradan onu okuyup validation fonksiyonu içinde istek atıyorum. Dönen sonucu da this.externalSource a setleyerek dropdown ı dolduruyorum.
Çünkü o açılır menünün datası da o değişkenden okunuyor.
Buraya kadar her şey normal.
Bu arada screen js içinde watch ile bu alanları dinliyoruz, filtrele butonuna basıldığında bir değişiklik varsa sayfadaki datayı güncellemek için istek atıyoruz. Bazı durumlarda customer ve platform bu screen js den geliyor. O durumda da bu attığım filterData js indeki yukarıdaki fonksiyona datasını gönderip aşağıya setliyoruz.
Yani objenin herhangi bir yerinden alttakilere erişmeniz kolay zaten onu yapıyoruz görselde gördüğünüz gibi.
Fakat şimdi yeni bir case geldi. Dediler ki Platform seçildikten sonra ona göre customer aratılırlen o platform id yi göndermek gerek.
Yani ben yine customer validation ı içerisinde isteğimi atıcam yazılan text i string olarak ama aynı zamanda üstteki elemanın lValue suna ihtiyacım var.
Selected olanlar lValue ya yazılıyor.
Fakat ben mesela this. dediğimde, kendisini görüyor. Yukarıyı görmüyor ki?
Obje içinde olmasam bu scope farkı durumlardında, en dışa erişebilmek için oraya const self = this; yapıyorduk, self e erişiyorduk.
Ama burada bir türlü üstteki elemana erişemedik bu nasıl sağlanabilir mevcut yapıda?
Yine const self = this şeklinde kullanabilirsin. Yapman gereken şey parent'ı getter ile kullanmak. Şu şekilde deneyebilirsin:
get directFilterData() {
const self = this;
return [
{
title: 'Platform',
key: 'platform',
lValue: '',
props: {},
async validator() {
console.log(this.key); // platform
},
},
{
title: 'Customer',
key: 'customer',
lValue: '',
props: {},
async validator() {
console.log(this.key); // customer
console.log(self.directFilterData[0].key); // platform
},
},
];
},
get directFilterData() {
const self = this;
return [
{
title: 'Platform',
key: 'platform',
lValue: '',
props: {},
async validator() {
console.log(this.key); // platform
},
},
{
title: 'Customer',
key: 'customer',
lValue: '',
props: {},
async validator() {
console.log(this.key); // customer
console.log(self.directFilterData[0].key); // platform
},
},
];
},
- Murtazaaylak
(28.07.23 08:51:29)
1
