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

Computedi anlamak

isset

Aslında iyi anladığımı düşünüyordum 2-3 adet türkçe video var bu konuda gayetde başarılılar ve tam olarak computed ne işe yarar anlaşılır bir şekilde anlatıyor ancak layout ile uğraşırken Applayout içinde şöyle bir koda denk geldim ve es geçmek istemedim .

const switchToTeam = (team) => {
    router.put(route('current-team.update'), {
        team_id: team.id,
    }, {
        preserveState: false,
    });
};

Yukardaki ve buna parametre gönderen

<template v-for="team in $page.props.auth.user.all_teams" :key="team.id">
           <form @submit.prevent="switchToTeam(team)">
                 <DropdownLink as="button">
                    <div class="flex items-center">
                       <svg v-if="team.id == $page.props.auth.user.current_team_id" class="me-2 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                           </svg>

                    <div>{{ team.name }}</div>
              </div>
        </DropdownLink>
    </form>
</template>

tamam anlıyorum kullanıcının takımları var switchToTeam fonksiyonuna gönderilen takımı update ediyorda

<template v-for="team in $page.props.auth.user.all_teams" :key="team.id"> burda kullanıcının takımları arasında döner ve kullanıcı başka bir takım seçtiğinde computed ile değişikliği almak gerekmezmi ? sonucta sayfa yenilenmiyor ? ama takım değişiyor .?

mgsmus

isset Bu Inertia ama, formu gönderdiğinizde yenilemeyi o yapıyor, $page.props değerlerini o güncelliyor. Inertia kullanmasaydınız tüm takımları ve belki seçilen takımı tutan reaktif objeleriniz olacaktı ve bunu bir yerde göstermek için belki de bir computed yazacaktınız...

Bu tür şeyleri Inertia ile değil Vue kullanarak öğrenmeye çalışın.

isset

anladım sanırım ben inertiayı es geçtiğimden dolayı karıştırdım demek istiyosunuzki

<script setup>
import { reactive, computed } from 'vue'

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// a computed ref
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

dökümantasyondaki

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

bu kısmı tanımlamıyor olmamızın sebebi inertia bunu $page.props.auth.user ile sağlıyor ve bu reactive bir obje ve inertia formdaki reactive objeyi otomatik algılıyor