polypush135
How to re initialize Alpine JS v3 in LivewView
It would look as if there is a new way to initialize Alpine js
The key takeaway is that now you have to call Alpine.start() after you import.
I’ve noticed that the use of Alpine.clone does not seem to be enough alone anymore.
My Alpine js works for everything outside of LV but for dom elms inside they get blown aways after the call to clone. I bet I’m just missing one more step that’s required to re initialize the alpine js elements.
Has anyone else figured this out yet?
Edit: calling Alpine.start from the console does seem to work to re initialize
but I guess its not enough to call it from onBeforeElUpdated? I guess I should find a onAfterElUpdated
Edit: I’ve tried to call from both onElUpdated and onNodeAdded with no luck ![]()
Edit Edit:
The solution was seen here.
Its in the way we watch the dom that has changed.
onBeforeElUpdated(from, to) {
if (!window.Alpine) return;
if (from.nodeType !== 1) return;
// AlpineJS v2
if (from.__x) window.Alpine.clone(from.__x, to);
// AlpineJS v3
if (from._x_dataStack) window.Alpine.clone(from, to);
},
Marked As Solved
polypush135
The solution is simply
onBeforeElUpdated(from, to) {
if (from._x_dataStack) {
window.Alpine.clone(from, to);
window.Alpine.initTree(to)
}
},
Last Post!
cigrainger
We used that solution and it caused some major problems. Namely with mark.js. But generally things like empty selections.
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #hex









