Vue js Şablonda ref kullanımı

isset · 4 Eyl 2024

<script setup>
import { Head, Link, useForm } from '@inertiajs/vue3';
import Checkbox from '@/Components/Checkbox.vue';
import InputError from '@/Components/InputError.vue';
import InputLabel from '@/Components/InputLabel.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import TextInput from '@/Components/TextInput.vue';

const form = useForm({
    name: '',
    username: '',
    email: '',
});

const submit = () => {
    form.post(route('register'), {
        onFinish: () => form.reset('password', 'password_confirmation'),
    });
};
</script>

<template>
    <Head title="Register" />

    <!-- <AuthenticationCard>
        <template #logo>
            <AuthenticationCardLogo />
        </template>

        <form @submit.prevent="submit">
            <div>
                <InputLabel for="name" value="Name" />
                <TextInput
                    id="name"
                    v-model="form.name"
                    type="text"
                    class="mt-1 block w-full"
                    required
                    autofocus
                    autocomplete="name"
                />
                <InputError class="mt-2" :message="form.errors.name" />
            </div>

devamı uzum olan bu kullanıcı giriş formunu kendime göre düzelttim ve bir form oluşturdum .
bazı alanların tercihen tıklanarak doldurulabilir olmasını istiyorum .

Şimdilik tek sayfada çalışıyorum önce tek sayfada tüm işlemleri halledebilirsem ilerde componentlerede ayırıcam
geleyim soruma Tüm kullanıcıları bu forma props ile yolladım diyelim herbir kullanıcıya tıkladıgımda o kullanıcının bilgileri ilgili inputa yani kullanıcının adı name emaili ise email inputuna doldurmak istiyorum bu amacla kısıtlı javascript bilgimden yola cıkarak inputlara ref verek erişmek isterken
https://vuejs.org/guide/essentials/template-refs.html bu dokumantasyona ulaştım

<script setup>
import { ref, onMounted } from 'vue'

// declare a ref to hold the element reference
// the name must match template ref value
const input = ref(null)

onMounted(() => {
  input.value.focus()
})
</script>

<template>
  <input ref="input" />
</template>

önce bu kodu kurcalıyodum aklımda onMounted nedir neden kullanılır sorusu var ? tamam yaşam döngüsü herkes anlatmış ama okadar düşük milisaniyelerki onMounted olmadanda kullanılabilir gibi geliyor
tüm yaşam döngüsünü test için herkes console.log() diyerek göstermiş hangi sırayla çalıştıgını vs anlatmış bunu anladım hadi localde gösteriyolar o yüzden bukadar hızlı internette 10 saniye geçikme olabilir dediğimde bu seferde aklıma şu soru geldi Ohalde herşeyi Onmounted içinemi yazmalıyım derkeeen chat gpt bombayı patlattı ref kullanmana gerek yok dedi

ve bu kdou vedi

// Kullanıcılar
const users = ref([
    { name: 'John Doe', username: 'johndoe' },
    { name: 'Jane Smith', username: 'janesmith' },
]);

// Kullanıcı seçildiğinde formu güncelle
const selectUser = (user) => {
    form.name = user.name;
    form.username = user.username;
};

chat gptnın kodu dogrumu onmountede yada computed ile inputu kontrol etmye vs gerek yokmudur ?

mgsmus · 4 Eyl 2024

isset Eğer form reactive ise ve input da v-model olarak form.name kullanıyorsa gerek yok, iki yönlü binding yapmış oluyorsunuz. Bu durumda input üzerinde elle değişiklik yaparsanız bunun forma da yansıyacağını unutmayın (çünkü iki yönlü).

isset tamam yaşam döngüsü herkes anlatmış ama okadar düşük milisaniyelerki onMounted olmadanda kullanılabilir gibi geliyor

Component'in render edilmesi içeride yapılan işleme, component yapısına, iç içe component olup olmadığına göre değişir. Böyle düşünmemeniz lazım. Böyle düşünürseniz bir çalışıp bir çalışmayan componentler yazarsınız.

isset · 5 Eyl 2024

form reactive ve input da v-model olarak form.name kullanıyor ancak iki yönlü binding için inputa yazarak veri girmiyorum bir butona tıklayarak inputa butondaki name değerini yolluyorum tıkladıgımda form.name = user.name; yapan bir fonksiyon yerine <button @click="form.name = user.name " denedim beceremedimde .

mgsmus · 5 Eyl 2024

isset Bir yerde hata yapmışsınızdır. Örneğe bakın

isset · 5 Eyl 2024

yaptığım hata utanç verici söylemek istemiyorum teşekkurler
kod surda dursun neme lazım

<script setup>
import { ref } from 'vue'


const form = ref({
  "name": null
})

const selectUser = (e) => {
  form.value.name = e.target.innerText
}

</script>

<template>
  <h3>Kullanıcı Seçin:</h3>
  <div>
    <button @click="selectUser">User1</button>
    <button @click="form.name = 'User2'">User2</button>
  </div>

  <h3>Seçilen Kullanıcı:</h3>

  <input v-model="form.name" />

  <h3>Form:</h3>

  <pre>{{ form }}</pre>
</template>

isset · 7 Eyl 2024

mgsmus Component'in render edilmesi içeride yapılan işleme, component yapısına, iç içe component olup olmadığına göre değişir. Böyle düşünmemeniz lazım. Böyle düşünürseniz bir çalışıp bir çalışmayan componentler yazarsınız.

bu dediğiniz yani içeride yapılan işlem buysa

 return Inertia::render('User/Brand/Show' ,[
        'brand' => $brands,
       ]);

bu kod için geçerli değildir sanırım yani bir kancayı dert etmeme gerek varmı ? zaten Componente ben veriyi yüklü göndermiş olmuyormuyum ?

yani şunu anlıyorum bazı videolarda axios kullanıyorlar bir apiden veri çekiyorlar geneldede laravel ile değil sadece Vue ile çalıştıklarından bu kancalar sanırım çok önem kazanyor.
Vue CLI ile vuex ,state vs birçok şeyleri kendileri yönettiğinden dahada bir önem kazanıyor benim sormak istediğim bu laravelde inertia ile componente user::all() diyerek tüm kullanıcıları gönderdiğimdede onmounted olmuşmu olmamışmı bunları check etmeme gerek varmı ?
Laravel inertia ve vue birlikte kullanılmış az sayıda uygulamada iç içe componetlerde mevcut ama Lifecycle ile ilgili bir şeye denk gelmedim pek örneğide yok gibi

mgsmus · 7 Eyl 2024

isset

isset laravelde inertia ile componente user::all() diyerek tüm kullanıcıları gönderdiğimdede onmounted olmuşmu olmamışmı bunları check etmeme gerek varmı ?

Gerek yok, onu Inertia hallediyor. Siz server render bittikten sonra component içinde sonradan bir şey yapacaksanız kancalar devreye girer. Mesela sayfa yüklendikten sonra ben ayrı bir işlem yapıyorum, bir değişkeni değiştiriyorum ama anlık da olsa eski değer önce gözüküyor sonra yeni değer geliyor, ekranda o yüzden bir titreme oluyor, bunu nasıl engellerim, component mount olmadan önce benim işlem çalışsın, sayfa direkt benim yeni değerle render edilsin dersiniz. Bakarsınız, onBeforeMount diye bir hook var, DOM hazırlandıktan sonra mountend olmadan önce devreye giriyor. İşlemi orada yaparsınız.

isset · 7 Eyl 2024

şimdi anladım çok ama çok mersi