tailwind-css - 使用tailwind css在alpinejs中每次刷新时重置x-data

Question

tailwindcss 和 phoenix liveview。我的代码看起来像这样

<div x-data="{isExpaned: false}">
  <button @click="isExpanded = !isExpaned">Parent menu</button>
  <div x-show="ixExpanded">Sub menu</div>
</div>

And First loaded page, even though isExpanded value is false, it shows sub menu.
and refresh the page also shows submenu.
And I checked that x-data="{isExpanded: false}"
why is it happened?

Answer 1

此问题与tailwindcss 或alpinejs 无关它与Phoenix liveview 设置有关我需要添加此代码以在app.js 文件中一起使用alpinejs 和liveview

let liveSocket = new LiveSocket('/live', Socket, {
  dom: {
    onBeforeElUpdated(from, to) {
      if (from.__x) {
        window.Alpine.clone(from.__x, to)
      }
    }
  },
  params: {
    _csrf_token: csrfToken
  },
  hooks: Hooks
})