v2.5.2
Giriş yap

vue js'de objenin içerisinde ki bir değerin var olup olmadığını kontrol etme

rotaile
216 defa görüntülendi ve 1 kişi tarafından değerlendirildi
1 1

arkadaşlar kolay gelsin. gönderiler sayfam için beğeni sistemi yapıyorum.
laravel-vuejs-inertia kullanıyorum..

veritabanından bana şu şekilde bir json çıktı geliyor.

{
  "id": 1,
  "user_id": 31,
  "post_id": 55,
  "created_at": "2023-04-19T19:32:38.000000Z",
  "updated_at": "2023-04-19T19:32:38.000000Z"
}
                
                    {
  "id": 2,
  "user_id": 30,
  "post_id": 55,
  "created_at": "2023-04-19T19:32:38.000000Z",
  "updated_at": "2023-04-19T19:32:38.000000Z"
}
                
                    {
  "id": 3,
  "user_id": 29,
  "post_id": 55,
  "created_at": "2023-04-19T19:32:38.000000Z",
  "updated_at": "2023-04-19T19:32:38.000000Z"
}

eğer kullanıcı o gönderiyi beğenmişse butonuna bir stil uygulamak istiyorum.

istediğim şey o an oturumu açık olan kişinin yani Auth::user()->id bu dönen json objesinin içerisinde ki user_id ile eşleşirse stil uygulamak.

<pre v-for="like in post.likes">
    {{ like }}
</pre>
php vuejs json
Cevap yaz
Cevaplar (1)
kadricaabuk
380 gün önce

İlk olarak javascript tarafında, find metodu kullanarak, API'den gelen liste içinde login olduğumuz kullanıcıyı arıyoruz.

const user_id = id // Auth::user()->id
const users = json // eklediğin user list

const myUser = users.find(u => u.id === user_id)
const myUserId = users.find(u => u.id === user_id).id

Daha sonra bulduğumuz kullanıcıyı gerekli element'in style tag'ini bind ederek conditional fill özelliği veriyoruz.

<pre v-for="like in post.likes" :style="[like.user_id === myUserId ? { fill: #000 } : { fill: transparent }]">
    {{ like }}
</pre>
1
#012480