时间戳

首页 > 解决方案 > 使用tailwind css在alpinejs中每次刷新时重置x-data

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

问题描述

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?

标签： tailwind-cssalpine.jsphoenix-live-view

解决方案

此问题与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
})

推荐阅读