Change the value of the parent's variable from a child component
I am trying to emit an event from a child component to change the value of a variable in the parent component . I want to dynamically show one of 3 "views " on a pop -up with each view being a different page on a multi -step form . I am using a variable called screenName which is an array with the values [ "first " , "second " , "third " and "fourth " ] for the four screens of the form . The idea is then to have Next and Previous buttons on each view page (which will be separate components ) to dynamically set which page to show on the main form pop -up . I have created a custom event that gets triggered on these buttons . But I don 't know how to create an output that will match the screen I need ? ! From what I can see the only way to change a variable is to use the event : Set . . . .but I don 't need to change the value , just select a value from the array of four values . I tried using the Find index formula but I don 't know how to set it up . When I type "second " into the formula (shouldn 't the item "second " match with the search term "second " ? ) , the output is 0 . I 've attached an image of my feeble attempt . Any assistance would be really appreciated ! @AlwaysbeLearnin - Triggering an event with the data required for the next component is a good way to go about it if they 're all separate . I assume all components are on a parent page ? If so , you could trigger the event and then - on the page - choose the greyed out event for the next component and configure it to set the appropriate variable on the page . Then hook that variable up to the component attribute . If all components are using the same variable , you might want to have a formula for the component attribute set to check whether the value is equal to the value it should be expecting in order to be displayed , else null or other appropriate value . If using a show /hide on each component , null or false would be fine to use where the variable value is not equal to what it should be to display it . Without seeing it , there may be a better way and others might have insight on that but hope that helps for now . 🙂 Actually , thinking about it . You won 't need anything in the component attribute - that would only be needed if you need to pass certain data in . You just need a show /hide on each component to display based on a variable value sent back from the component . If null or false don 't display . Thanks for the thoughts @Tom Ireland I was using slots in a main component (just a container ) on the main page . Each slot would have a show /hide based on the form component I want to show (eg "first " , "second " , "third " or "fourth " ) . I am going to try using numbers instead to use the Add /Minus formulae instead . Do you know if there 's any issues with emitting events from components that are 2 -3 levels nested inside a parent component (will the events bubble up to the parent ? ) and how to select a value of a variable from an array . I 'm really finding the logic hard to understand . . .which sucks cos it looks so intuitive ! Can 't wrap my head around it just yet Interesting approach , @AlwaysbeLearnin , and hard to visualise without seeing it but if the slots are within the component , you 'd probably want to control visibility within the context of the component . I 've never tried show /hide on multiple slots before in the way you describe . If the element slotted in is changing some value , then you 'd need to pass that via an attribute if I 'm not mistaken , so you just need to hook the variable up on the page to the attribute and have the variable update dependent on the element clicked . This should automatically update inside the component - otherwise , you 'd need an event on attribute change within the component I think . I put an example together quickly but this uses separate components as opposed to slots . I 'm back to work from lunch but can try and help you unravel this a bit later if needed ? 🙂 Thanks @Tom Ireland , had a little breakthrough - you 're right , it does seem to be updating the variable when I use numbers . Turns out I hadn 't registered the event properly on the component instance . Thanks for all the help so far , I think I should be able to manage from here but will hit you up later if I start pulling my hair out again 😛
.jpeg/public)