Replies: 1 comment 11 replies
-
|
hey @tbjolset unfortunately this is a bug. Its been reported a few other times as well see #2296 #1837 #1917 Essentially |
Beta Was this translation helpful? Give feedback.
-
|
Great point @SimoTod. I've updated PR to include a fix for x-for case as well. |
Beta Was this translation helpful? Give feedback.
-
|
@kylethielk - thanks so much for #2556, it looks like for some reason the bug still shows up if there is Please see the attached sample code below, I also made a fiddle <html>
<head><script src="https://unpkg.com/alpinejs" defer></script></head>
<body>
<div x-data="{ user: { number: 5 }}">
<template x-if="user">
<div>
<div x-data="{ count: 0 }" x-modelable="count" x-model="user.number">
<button @click="count++">Increment</button>
</div>
Number: <span x-text="user.number"></span>
</div>
</template>
<button @click="user=null">remove user</button>
</div>
</body>The weird thing is, that if you click the remove user button as first, you get the errors. While if you at least once click the increment and then click remove user, the errors don't show up anymore. Do you have any idea what's behind this? |
Beta Was this translation helpful? Give feedback.
-
|
Hi @janzikmund unfortunately |
Beta Was this translation helpful? Give feedback.
-
|
@kylethielk - thanks, I checked your code, but I still wasn't able to pinpoint the problem. Apparently it's caused by the Strange thing is, the error doesn't only show up for the element with I tried to check and fix it in el._x_undoIf = () => {
walk(clone2, (node) => {
if (!!node._x_effects) {
node._x_effects.forEach(dequeueJob);
// one way
node._x_effects.forEach((effect) => {
node._x_effects.delete(effect);
});
// another way, seems to do the same
node._x_effects.clear();
// shows empty _x_effects, but still the errors are thrown
console.log(node, node._x_effects);
}
});
clone2.remove();
delete el._x_currentIfEl;
};Also, this _x_effects clean up is only happening on the element with x-modelable, while the errors are thrown for all the other fields as well, so the problem must probably lie somewhere else. |
Beta Was this translation helpful? Give feedback.
-
|
For anyone interested, I haven't found a way to fix this in Alpinejs, but the easiest way to circumnavigate the problem was to bind the x-if on a different variable than the one assigned to x-model on the modelable field, then no problem seems to happen anymore. For my example above, the modified code would look something like this: <html>
<head><script src="https://unpkg.com/alpinejs" defer></script></head>
<body>
<div x-data="{ userVisible: true, user: { number: 5 }}">
<template x-if="userVisible">
<div>
<div x-data="{ count: 0 }" x-modelable="count" x-model="user.number">
<button @click="count++">Increment</button>
</div>
Number: <span x-text="user.number"></span>
</div>
</template>
<button @click="userVisible=false;user=null;">remove user</button>
</div>
</body> |
Beta Was this translation helpful? Give feedback.
-
x-if seems to be a nice way to do component based design: use x-if to only evaluate/render a block if the element exists, otherwise ignore the object/component. However, there seems to be some weird behavior that this works initially if the object in question is null, but if you set the object non-null, then back to null, the x-if template insists on trying to evaluate the object. Easier to see from an example:
Initially this works perfectly: The x-if template doesn't try to render/evaluate the logged in block, since the user is null. When tapping log in, it also shows the username correctly. However, after tapping log out, the x-if template now renders the log in div again, as it should, but also tries to evaluate user.name, for some reason, leading to uncaught type errors.
alpinejs:1 Alpine Expression Error: Cannot read properties of null (reading 'name')Beta Was this translation helpful? Give feedback.
All reactions