[SOLVED] HTML hx-boost with AlpineJS x-for - errors after using back button

HTML hx-boost with AlpineJS x-for - errors after using back button

I have some code like:

<html>
  ...
  <body>
    <div id="content-root"
         hx-boost="true"
         hx-select="#content-root"
         hx-target="#content-root"
         hx-swap="outerHTML">
     ...
              <template x-for="(item, i) in chips" :key="item.value">
                <span x-show="item.value === '__all__' || selectedItems[0]?.value !== '__all__'">Label</span>
              </template>
    </div>
  <body>
<html>

My server is returning complete HTML doc to every request, not partials.

It works fine when I first load the page. It works when I click through to another page (the template content is on every page).

But if I click the browser back button I get errors:

ReferenceError: item is not defined
and
Alpine Expression Error: item is not defined
Expression: "item.value === '__all__' || selectedItems[0]?.value !== '__all__'"

What is going on and how do I get it to work?

It seems as if the elements originally generated by the x-for have been restored by clicking back, but they have lost their connection to the Alpine data they were originally bound to?

Solution

This is probably the source of your issue:

htmx issue

TLDR; On page load, Alpine modifies the DOM to generate the list. HTMX saves that modified DOM to the browser's history, and it's re-evaluated when you visit the page with the back button.