Laravel Türkiye Discord Kanalı Forumda kod paylaşılırken dikkat edilmesi gerekenler!Birlikte proje geliştirmek ister misiniz?

Vue DevTools hakkında..

yalcin

Öncelikle herkese iyi gceler iyi çalışmlar diliyorum
Vue DevTools ile sayfaya bakıldıgında

props

attrs
errorBags:Array[0]
errors: Object (empty)
jetstream: Object
user: Object

şeklinde iki ana başlık var props olsun olmasın mutlaka attrs kısmı mevcut .
Takip ettiğim öğretici bir "Jetstream Vue+inertia " ile oluşturulan derse ait videonun ortasında Chrome için VueDevtools yükleniyor o yüzden ilk kurulumda bakma fırsatım olmadı , tamda bu yüzden attrs kısmı acaba proje ile ilgili bir durummu yoksa standart gelen default bir özellikmi yada jetstream 'e ait bir özellkmi bilemediğim için sormak istedim .
errorBags ile errors boş gelmekte ancak jetstream kısmını Jetstream'e ait ayarlarla ilgili

jetstream:  Object
        canCreateTeams:false
        canManageTwoFactorAuthentication:true
        canUpdatePassword:true
        canUpdateProfileInformation:true
        flash:Array[0]
        hasAccountDeletionFeatures:true
        hasApiFeatures:false
        hasTeamFeatures:false
        hasTermsAndPrivacyPolicyFeature:false
        managesProfilePhotos:true

bunu yukardaki tabloyu görünce insanın aklına attrs acaba attributes 'in kısaltması olabilirmi sorusu geliyor ?

aslında sorumun çıkış noktası User: Object kısmı

user:  Object
        created_at:"2021-04-25T15:39:06.000000Z"
        current_team_id:null
        email:"testir@gmail.com"
        email_verified_at:null
          id:1
        name:"cem"

bu attrs kısmında yukardaki gibi auth()->user() 'ait tüm mevcut olsada yinede işlem yaparken Propsda bir user tanımlaması yapılarak giriş yapmış kullanıcıya ait bilgi propsdan alınıyor yani kısaca Devtools ile bakıldıgında

**props**
   user:Object

**attrs**
     user:Object

hem propsda hemde attrs kısmında user'e ait bilgiler mevcut .
1.sorum bu attrs nedir ?
2.sorum attrs kısmından User:object içindeki id bilgiisne ulaşamazmıyım . ?

mgsmus

yalcin props ya da emits içinde geçmeyen, direkt componente atanan özellikler attrs diye geçer, bunlara Vue'de this.$attrs ile ulaşabiliyorsunuz. attrs kısmında user diye bir obje varsa ve içinde id varsa ona this.$attrs.user.id şeklinde ulaşabilirsiniz. Inertia onları kendisi oluşturuyor, data-page içinde sayfaya iliştiriyor, böylece sayfanın özellikleri olmuş oluyor ve sayfada this.$attrs ya da this.$page.props şeklinde ulaşabiliyorsunuz.

Yalnız Inertia'nın data paylaşma özelliğini kullandığınızda, yani \App\Http\Middleware\HandleInertiaRequests::share() içerisinde tüm sayfalara veri gönderdiğinizde bu veri attrs ile birleşiyor ve $page.props ile ortak oluyor. Yani hem this.$attrs.user.name ile ulaşabiliyorsunuz hem de this.$page.props.user.name şeklinde ulaşabiliyorsunuz. Ben this.$page.props ile ulaşmayı tercih ediyorum.

this.$attrs/this.$page.props ile component içindeki local props özelliğini karıştırmayın, ikisi farklı şeyler.

yalcin

mgsmus hocam

sayfada this.$attrs ya da this.$page.props şeklinde ulaşabiliyorsunuz.

cümlenizde ışık yandı , daha önce bu linkde :
https://laravel.gen.tr/d/5105-vue-js-ve-inertia-hakkinda-yardima-ihtiyacim-var
farklı bir şekilde sormuşum aslında o konuyu açtığımda vue Devtools eklentisinden henüz bi haberdim .
bu arada aşşagıdaki her iki kullanımda sıkıntısız çalışıyor
{{ $page.props.user.name }}
{{ this.$page.props.user.name }}
yanıt için çok teşekkürler

mgsmus

yalcin Bu şekilde sadece componentin script tagı içerisinde kullanmanız lazım, template içinde zaten user diye ulaşabiliyorsunuz. Yani {{ user.name }}. Örneğin methods özelliği içinde bir yöntem tanımladınız ve içinde kullanıcı adına erişmeniz lazım. İşte orada this.$page.props.user.name şeklinde ulaşırsınız.

yalcin

Süpersin hocam , her cevabın bi level atlatıyor. borcum çoğalıyor.Teşekkürler