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

Vue'da 2 Componets Arasında props Nasıl Yapabilirim ?

koti42

Merhaba dostlar props kullanarak basket.vue da ki discountWallet değişkeninin içeriğini payment.vue'da ki PaymentForm dizisinine aktarmam gerekiyor ama daha önce props kullanmadığım için nasıl yapabileceğimden emin olamıyorum. yardımcı olabilir misiniz acaba ?

Basket.vue componeti

data(){
discountWallet:null,
}
    checkUsersWallet()
    {
      const vm = this;
      axios
        .post("/business/check-wallet", { wallet: vm.checkUserWallet })
        .then((res) => {
          vm.getBasket();
          vm.discountWallet = res.data
          vm.$message({
            type: "success",
            message: "Paranız Başarıyla Kullanılmıştır!",
          });
        })
        .catch((error) => {
          vm.$message({
            type: "error",
            message: error.response.data.error,
          });
        });
    },

payment.vue componenti

import Basket from "./inc/Basket";
paymentForm: {
        name: "",
        cardNumber: "",
        expireDate: "",
        cvc: "",
        address: "",
        city: "İstanbul",
        phone_number: "",
        products: [],
        installment: 1,
        sPosID: "",
        term: null,
        info_form: null,
        paymentType: "credit_card",
      },
      onComplete(form) {
      const vm = this;
      vm.loading = true;
      this.$refs[form].validate((valid) => {
        if (valid) {
          // if(vm.paymentForm.paymentType == "bank_transfer") {
          //   vm.paymentForm.bank_transfer_code = vm.transferCode;
          // }
          vm.paymentForm.address_id = vm.selectedAddress;
          if (vm.totalPrice == 0) {
            vm.paymentForm.paymentType = "free";
          }
          axios.post("/payment/create-payment", vm.paymentForm).then(
            (response) => {
              vm.loading = false;
              if (response.data.type && response.data.type == "html") {
                var html_string = response.data.view;
                document.open();
                document.write(html_string);
                document.close();
              } else if (
                response.data.type &&
                response.data.type == "response"
              ) {
                vm.payment = response.data.payment;
                vm.transferCode = response.data.transfer_code;
                vm.$store.dispatch("basket/getBasket");
              } else {
                window.location.href = response.data.url;
              }
            },
            (error) => {
              vm.loading = false;
            }
          );

mgsmus

koti42 Çok Vue bilgim yok ama sanki Basket.vue içerisinde bir event emitleyip bu değişkeni event parametresi olarak dışa çıkaracaksınız. Basket.vue ve Payment.vue componentinin kullanıldığı parent içinde Basket.vue'den gelen event'ı yakalayıp ya Payment.vue içindeki bir yöntemi ateşletip paymentForm içine alacaksınız ya da parent içinde ref oluşturup bunu Payment'e vereceksiniz.

Basket.vue

export default {
    emits:[
        'discountWalletLoaded'
    ],
    setup(props, {emit}) {
        axios
            .post()
            .then(res => {
                // ...
                emit('discountWalletLoaded', res.data)
            })
    }
}

Payment.vue

export default {
    props: {
        discountWallet: Object
    }
    setup(props) {
        // props.discountWallet
        
        const paymentForm = reactive({
            name: null,
            discountWallet: props.discountWallet.id,
            // ...
        })
    }
}

Parent component:

<script>
export default {
    components {
        Basket,
        Payment,
    }
    setup(props) {
        const discountWallet = ref({})

        function onDiscountWalletLoaded(wallet) {
            discountWallet.value = wallet
        }

        return {
            discountWallet,
            onDiscountWalletLoaded,
        }
    }
}
</script>

<template>
    <Basket @discount-wallet-loaded="onDiscountWalletLoaded" />
    <Payment :discount-wallet="discountWallet" />
</template>

ya da Vuex veyahut global emitter kullanacaksınız.

trueWD

mgsmus Mustafa helal olsun 🙂