ubaid

I have 3 components

1. Sibling
2. Parent
3. Child

In the Parent component I am listening to an event triggerPar which is emitted by the Sibling and an ID is passed. The Parent passes that ID to the Child. But the view does not update upon clicking the button Update the view. If I add something extra to the parent.html after the view is rendered and before the next click; and then click Update the view the view is updated.

How can I manually trigger the update view in such cases?

<!-- sibling.html -->

<div>
<button wire:click="$emit('triggerPar', 'xx019990')">
   Update the view
</button>
</div>

<!-- parent.html -->
<div>
<livewire:child :pId="$pid" />
</div>

// Parent.php

public $pid;

public $listeners = [
   'triggerPar' => 'setAndUpdate'
];

public function setAndUpdate($pid) {
   $this->pid = $pid;
}

<!-- child.html -->

<div>

{{ $pid }}

</div>

// Child.php

public  $pid = null;

public function mount($pId) {
   $this->pid = $pid;
}

Updated Livewire and the issue is fixed.

Updated Livewire and the issue is fixed.

No effect, and the HTML from browser inspect for my implementation shows the attributes are mapped correctly

<label class="inline-flex items-center">
    <input type="radio" class="rounded-full border-gray-300 text-primary shadow-sm focus:border-primary-extra-light focus:ring focus:ring-primary-extra-light focus:ring-opacity-50" id="r1" name="test" value="one" wire:model="test.radio">
    <span class="ml-2 text-sm text-gray-600">One</span>
</label>

<label class="inline-flex items-center">
    <input type="radio" class="rounded-full border-gray-300 text-primary shadow-sm focus:border-primary-extra-light focus:ring focus:ring-primary-extra-light focus:ring-opacity-50" id="r2" name="test" value="two" wire:model="test.radio">
    <span class="ml-2 text-sm text-gray-600">Two</span>
</label>

I have created a Laravel component for radio (not livewire component)

<!-- ui-radio -->
<label class="inline-flex items-center">
    <input type="radio" {{ $attributes->merge(['class' => 'rounded-full border-gray-300 text-primary shadow-sm focus:border-primary-extra-light focus:ring focus:ring-primary-extra-light focus:ring-opacity-50']) }}>
    <span class="ml-2 text-sm text-gray-600">{{ $slot }}</span>
</label>

When I use the component with livewire it doesn't work

<x-ui-radio name="test" value="one" wire:model="test.radio">
One
</x-ui-radio>

<x-ui-radio name="test" value="two" wire:model="test.radio">
Two
</x-ui-radio>

public $test = [
    'radio' => 'one'
];

But if I use the wire:model on HTML for radio it works normally. What am I missing here

Hi,

I am having trouble with @props. Inside the component I have something like:

@props(['testclass' => ''])
@php
    $c = 'bg-transparent hover:bg-blue-500';
    // $c .= ' ' . $testclass;
@endphp

the $testclass is always empty but when I dd($attributes) after removing @props the attribute is there.

 Illuminate\View\ComponentAttributeBag Object ( [attributes:protected] => Array ( [testclass] => 'xkadfasd' ) ) 1 

Can someone explain what I might be doing wrong?

Okay! So I found the issue, the Namespace was wrong. I forgot to change it to App\View\Components\Card\Body

Okay! So I found the issue, the Namespace was wrong. I forgot to change it to App\View\Components\Card\Body

Hello,

I have created blade component for bootstrap card and when I try to use it twice I get the error:

 Cannot declare class App\View\Components\Body, because the name is already in use 

My component structure inside the View\Components Folder

Card
|--- Body
|--- Card
|--- Footer
|--- Header

Each respective view has the following code (only change is the class):

<div {{ $attributes->merge(['class' => 'card-body']) }}>
    {{ $slot }}
</div>

Now when I use it in other view-x.blade.php as follows I get the error mentioned above,

<div class="row pt-4">
            <div class="col-sm-4">
                <x-card.card>
                    <x-card.body>
                        The content will come here...
                    </x-card.body>
                </x-card.card>
            </div>

            <div class="col-sm-8">
                <x-card.card>
                    <x-card.body>
			the content will come here...
                    </x-card.body>
                </x-card.card>
            </div>
        </div>

Any clue on what I am doing wrong? Why am I not getting the same error for other components like the <x-card.card>?