Read input from parent pages best practice

#1

I’m not a JS hero and I know some small bits and pieces about Vue, but that’s it. I’d like to look to Livewire as it sits much closer to my comfort zone :slight_smile:

Part of our application is a price calculator. It takes a lot of input, sends it to an API and displays the result. We do this with Vue. The calculation component does not have all the inputs, it’s just the calculation. It has native JS addEventListener that triggers on input changes and calls a Vue method.

I think we can heavily simplify all of this by using Livewire, but my guess is that we would have put both inputs and the calculation into a single component. If not, what would be a better solution?

#2

In case of Livewire version of your component(s) I see your calculator as a “normal” PHP helper class that you run when you render the form.

#3

I’ve solved it by adding some native javascript to catch input of the parent page that’s not a component.

I’m emitting an event when something changes. It’s similar to what we had in Vue, but much much simpler and clear.