Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

V2 Multi Select with wire:model.live does not react on changes #833

Open
nastoychev opened this issue Dec 1, 2023 · 4 comments
Open

V2 Multi Select with wire:model.live does not react on changes #833

nastoychev opened this issue Dec 1, 2023 · 4 comments
Assignees
Labels
bug Something isn't working

Comments

@nastoychev
Copy link
Contributor

nastoychev commented Dec 1, 2023

Describe the bug
V2 Multi Select with wire:model.live does not react on changes
To Reproduce

TestComponent.php

<?php

namespace App\Livewire;

use Livewire\Component;

class TestComponent extends Component
{
    public array $options = [];

    public function checkOptions(): void {
        dump($this->option);
    }

    public function render()
    {
        return view('livewire.test-component');
    }
}

bookie-selector.blade.php


<div>
        <form wire:submit="checkOptions">
        <x-select
            wire:model.live="options"
            label="Select Statuses"
            placeholder="Select many statuses"
            multiselect
            :options="['Active', 'Pending', 'Stuck', 'Done']"
        />
        <button type="submit">Submit</button>
    </form>
</div>

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots or Videos
If applicable, add screenshots or videos to help explain your problem.

Dependencies

  • WireUI Version: 2.0.0
  • Laravel Version: 10.X.X
  • Alpine.js Version: 3.X.X
  • Livewire Version: 3.X.X
  • Lang: en_US

Desktop (If applicable, please complete the following information):

  • OS: Windows 11
  • Browser: edge
  • Version [e.g. 22]

Smartphone (If applicable, please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]
@nastoychev nastoychev added the bug Something isn't working label Dec 1, 2023
@nastoychev nastoychev changed the title V2 Select with wire:model.live does not react on changes V2 Multi Select with wire:model.live does not react on changes Dec 1, 2023
@viliusvsx
Copy link

@nastoychev I think the problem is how you wrote this line: wire:model.live="'$options'"

You should write it like this: wire:model.live="options"

@nastoychev
Copy link
Contributor Author

@nastoychev I think the problem is how you wrote this line: wire:model.live="'$options'"

You should write it like this: wire:model.live="options"

No, it does not work.

P.p. This reproduction example is one of the many attempts to be copied. I will change the description.

Thank you for that suggestion.

@viliusvsx
Copy link

@nastoychev I don't understand why you wrote a dollar sign in wire:model.live. As I can see in your updated code version, an error will still occur if you do not remove the dollar sign

@nastoychev
Copy link
Contributor Author

nastoychev commented Dec 11, 2023

@nastoychev I don't understand why you wrote a dollar sign in wire:model.live. As I can see in your updated code version, an error will still occur if you do not remove the dollar sign

Thanks a lot for your review and taking care of the correctness. Now I edited again the example where I added simple submit button which check the $this->options.
Still not filling it with chosen options.

Perhaps I saw that in the documentation page there are no examples to the selects with wire:model.live and if it's not integrated we need to know and take care of it. I guess the problem is deeper, because our components are pretty complicated behind the scene.
So if @PH7-Jack write also some suggestions will be helpful.
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants