render x-if template on page refresh based on checked value

[ITwrx]

hi,

I have something like:

<div x-data="{layout_preset: ''}">           
    <label class="ml-1 inline-block">
        <input type="radio" name="layout_preset" value="standard" @change="layout_preset = 'standard'">
             Standard
         </label>                        
     <label class="ml-1 inline-block">
         <input type="radio" name="layout_preset" value="text_only" @change="layout_preset = 'text_only'">
             Text
     </label>
     <label class="ml-1 inline-block">
         <input type="radio" name="layout_preset" value="form" @change="layout_preset = 'form'">
             Form
      </label>
      <br><br>
      <template x-if="layout_preset == 'standard'">
          <div id="standard">StandardLayoutTemplate()</div>
      </template>
      <template x-if="layout_preset == 'text_only'">
            <div id="text_only" >TextOnlyLayoutTemplate()</div>
      </template>
      <template x-if="layout_preset == 'form'">
            <div id="form" >FormLayoutTemplate()</div>
      </template>
</div>

This correctly renders the appropriate x-if template based on the radio group's checked value, and when i refresh the page, the radio input/value remains checked, but the corresponding x-if template is not automatically re-rendered.

While unexpected to me, maybe this is expected behavior for alpine? It seems like maybe i'm supposed to pull in the persist plugin to persist the value/checked state to session and perhaps use a unique id to avoid conflicts. Is that really necessary just to have it re-render the x-if template based on the current value of the radio? It seems like i should be able to have something besides a empty string for the default value of layout_preset in the x-data tag, instead of persisting to localStorage or session, but so far i haven't got anything to work. I just want to make sure i'm not missing something basic.

thanks

[ekwoka]

Based on this code, this would be expected behavior.

You're only doing one way binding on events, so on refresh the component does not have the state of the selected radio element, even though the browser preserves it. The radio doesn't emit a change event on load.

You can use x init on the rwidos to persist the correct value, or use x-model instead, ideally x-model.fill which would handle this easily :)

[ITwrx]

Thanks for the detailed response!

I tried using x-model.fill="layout_preset" for each of the radios, which does change the value when clicked, but it always uses the first radio's value on fresh page load.

[ekwoka]

hmm, tough. What about an x-init?

[ITwrx]

i'm not sure what i'm supposed to put in the x-init.

[ITwrx]

the alpine docs example doesn't account for page reloads either.

[ITwrx]

in the examples that i've seen that look like they would work, the whole list is defined in the x-data and then looped through with x-for. I may try that, but it's not what i originally had in mind.