راکت
حل شده

مشکل در گرفتن اطلاعات input در livewire

3 پاسخ

سلام دوستان

من یه input دارم که با livewire مقدارشو میگیرم و اوکیه کار میکنه
حالا یه دکمه گذاشتم که وقتی روش کلیک شد همین input رو با جی‌کوئری اضافه میکنه به صفحه

ولی مقدار input که به این صورت اضافه شده null برمیگرده
مقدار name های input ها رو هم به صورت text.0 و text.1 و.... امتحان کردم نشد
با مقدار name های text[] هم نشد
کسی میدونه چرا؟
تشکر 🌺🌸

ایمان
ایمان
@eee7eee
ثبت پرسش جدید

پاسخ‌ها

3
حسام موسوی
حسام موسوی
@hesammousavi

تخصص: طراح و برنامه نویس

بهترین پاسخ

آرمین جان اضافه کردن input رو با استفاده از خود liveware باس انجام بدی
و میتونی از alpinejs هم استفاده کنی
jquery گزینه ای مناسبی نیست

حسام موسوی
حسام موسوی
@hesammousavi

تخصص: طراح و برنامه نویس

سلام وقتت بخیر
کد کامپوننت رو قرار بده ببینیم چیکار کردی

ایمان
ایمان
@eee7eee

تخصص: تازه کار

@hesammousavi

کد کامپوننت :

<div>
    <form wire:submit.prevent="store">
        <div class="form-row">
            <div class="form-group col-md-12">
                <div class="accordion accordion-light custom-accordion">
                    <div class="accordion-row open">
                        <a href="#" class="accordion-header">
                            <span>گالری تصاویر نمونه‌کار</span>
                            <button type="button" class="btn btn-sm btn-success" onclick="addImageInput()">
                                <i class="ti-plus m-r-5"></i> افزدون عکس
                            </button>
                        </a>
                        <div class="accordion-body mt-3" id="galleryArea">
                        </div>
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-primary mt-3">
                <div class="d-flex align-items-center">
                    <span class="mx-2">ثبت</span>
                    <div wire:loading wire:target="store">
                        <div class="spinner-border spinner-border-sm text-light"></div>
                    </div>
                </div>
            </button>
            <a href="https://roocket.ir/{{ route('admin.works.index') }}" class="btn btn-secondary mt-3 ml-2">بازگشت</a>
        </div>
    </form>
</div>

کد مدلش (متغیر یا کنترلر کامپوننت) :

<?php

namespace App\Http\Livewire\Admin\Works;

use Livewire\Component;
use Livewire\WithFileUploads;

class GalleryCreate extends Component
{

    use WithFileUploads;

    public $images;

    public function store()
    {

        dd($this->images);

    }

    public function render()
    {
        return view('livewire.admin.works.gallery-create');
    }
}

کد جی کوئری برای ایجاد input جدید :

<script>
    function setCustomFileLabel(element, label) {
        var fileName = $(`#${element}`).val().split("\\").pop();
        $(`#${element}`).next(`#${label}`).html(fileName);

        Livewire.emit('refreshComponent');
    }

    var imageNum = 0;

    function addImageInput() {
        $('#galleryArea').append(
            `<div id="imageInput-${imageNum}" class="form-group row d-flex justify-content-start align-items-baseline"><label for="images.${imageNum}" class="col-sm-2 col-form-label">یک تصویر انتخاب کنید</label><div class="custom-file col-sm-4"><input wire:model.lazy="images.${imageNum}" type="file" onchange="setCustomFileLabel('customFile-${imageNum}','customFileLabel-${imageNum}')" class="custom-file-input" id="customFile-${imageNum}"><label wire:ignore class="custom-file-label" id="customFileLabel-${imageNum}" for="images.${imageNum}">انتخاب فایل</label></div><div class="custom-file col-sm-2 ml-5"><button type="button" onclick="deleteImageInput('imageInput-${imageNum}')" class="btn btn-sm btn-danger mt-1"><i class="ti-trash m-r-5"></i> حذف</button></div></div>`
        );
        imageNum += 1;
    }

    function deleteImageInput(id) {
        $(`#${id}`).remove();
    }
</script>

شاید پاسخ شما همین‌جا باشد

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام