How to append value only specific div are using laravel livewire

#1

What seems to be the problem:
I have created a parent-child option using liveware. The issue is, I added another parent-child option inside the previous parent. the issue is when adding a child to a particular main parent it’s adding to all parent div. I have to do is, when adding a child to the main parent it should add only to particular parent div area.

Steps to Reproduce:

Are you using the latest version of Livewire: yes

Do you have any screenshots or code examples:

Screenshot_1
Screenshot_1873×810 47.9 KB

#2

When looping over components, make sure you use the wire:key directive so that Livewire can track components correctly.

You might also want to check the scope of the event you’re emitting (only an assumption as you’ve not provided any code) so that the wire:click handler on your Add (+) button only sends the event to its parent and not to every component on your page.

1 Like
#3

Thanks. I will try and let u know

#4

Hi, Tried with wire: key. I assigned key values for each field. But I don’t know how to get key-value when click add or delete button.
can check the code via following URL,


Please can u help regarding this

#5

You don’t need to get the key, Livewire uses that key during the DOM diffing process to distinguish between components that have the same HTML structure. Think of wire:key like a door number on houses.

1 Like
#6

Ok. But I used emit and emitup to add product/service filed to its main section. But it didnt work. I don’t know the issue…

#7

Take a look at this video which might clear things up.

1 Like
#8

I tried several ways. Still, I could not able to find the solution to my issue. can access my code via laravel paly ground using the following URL,

In this code base, there is a button called “Add Section”. When clicking this button, the section is adding properly.

Inside each section there is a button called “Add Section Items”.
What I want is, when clicking this button single text field should want to add only to a specific section. But currently what happening is when clicking this button text filed is adding to all sections.

So how can I fix this, Please help me to figure out this? I am new to liveware.

#9

That’s because you’re not scoping $categoriesItems to a $supplierCategories. You’re looping over all the $supplierCategories and then all the $categoriesItems, nowhere are you associating a $categoriesItem to a specific $supplierCategory.

There are a couple of options in my opinion:

  1. When you addCategoryItems, pass the id of the $supplierCategory and use that as an index in the $categoriesItems array to scope items to a supplier

  2. Make a child component which has a property for the supplier and an array of items keeping everything encapsulated.

1 Like
#10

Thanks for your reply. I will check it…