Multiple Instances of Same Component

#1

I have a livewire component which displays a the count of the number of the number of items in a customer’s wishlist from the database. When someone removes or adds an item to their wishlist, the component is updated with the current count. That’s all working great. The problem is that, because the component appears in two places in my main layout, (I use media queries to hide certain parts of template when viewed using small screen and another when viewed using larger screens) when I fire the event that the wishlist has been added to or subtracted from, the listener in the component is called twice and so TWO calls are made to the database to get the current count.

Without getting into the question of whether I should really just use a session variable to handle the counter display value, is it possible for me to somehow have the component make the database call only once, but update the value for both instances?

Note: someone mentioned at some point somewhere about putting the component in a blade include, and including it twice rather than putting two instances on the page. That did not work… and the database call was still duplicated

Using Laravel 2.2.9

Any thoughts on this? Thanks so much!

#2

If I got the question right, you have the same code appears twice one for the desktop and the other for mobile, and when you fire the event it fires twice right?

Alright, you can check if the display is desktop or phone by installing this package and depend on it do what ever you want.

For example:

Component

public function save()
{
   if (Browser::isDesktop()) {
     // do this
    }

   if (Browser::isMobile()) {
     // do this
   }
}

in your blade

@destop
// do this
@endesktop

@mobile
// do that
@endmobile
#3

I appreciate the thoughtful reply. And you did get my question exactly right, and your solution would indeed be one way to do it. It’s an interesting solution, and I will keep it in mind.

What I’m really hoping for though, is to find out whether there is a Livewire way to handle this type of scenario. I’d prefer not to install another package to address this if I can avoid it. I have to assume that it’s not uncommon to have multiple instances of a Livewire component on a page… so the question really comes down to, “can they more or less act as a single component”… can they somehow not make TWO trips to the Livewire component class or, if they have to, can I somehow limit the calls to the database within the component class.

Even though I am hoping for a more Livewire-centric solution, I thank you for your idea!

#4

Maybe you can make a single form for example to handle the call and inside it manipulate the data what ever you want, or maybe if you are able to past the code it will be more useful to give you a hint or even a solution.

You can do the following [not tested]
in your component

public  $isMobile = false;
public $isDesktop = false;

in your blade

@if($isMobile) 
your Mobile Layouts
@endif

@if($isDesktop)
your Desktop layouts
@endif

<script>
window.onload(() => {
 let componentName = window.livewire.components.findComponent('component-id')

// check if  the window width is mobile [depends on your media query]
// access  the property directly and change its value
componentName.isMobile = true;

// or call specifque method
componentName.call('yourMethod(maybeParameters)');
})
</script>

You can find The component ID by typing in the console

window.livewire.components.componentsById
#5

Thanks for trying to suggest another approach. I probably should not have mentioned the mobile/desktop stuff because that really isn’t at all the problem. I do appreciate the time you took to respond, but I am just going to store that count in a session and increment and decrement in the component class… no database call necessary, so no duplicate database calls will occur. I will continue to keep my eyes open for a solution to the question of, “Can I have a multiple instances of the same component in a view which doesn’t require multiple trips to the server… just one trip to the server with all affected component views updated?” If I find a solution I will post it here. Thanks again!

#6

Depends on your situation, it will be much easier if you post code instead of description but it’s totally fine.

If you want to just fetch data from the database one time and save it to another call I suggest watching this video. Other ways if you past some code I’ll be happy to help you