-
|
Hi, There are many Directives use "effect(() => {})" to update the element value/text. But these Directives do not process the case where the element is removed by x-if directive! Here is the small demo for recreate the issue: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rectangle Editor</title>
<script type="text/javascript">
class Border {
color = 'red'
}
class Borders {
left = new Border()
right = new Border()
}
class Sizing {
desktop = 12
tablet = 12
mobile = 12
}
class Block {
isBlock = true
borders = new Borders()
sizing = new Sizing()
}
class Section {
isSection = true
borders = new Borders()
blocks = [
new Block()
]
constructor() {
this.borders.right.color = 'blue'
}
}
class Editor {
selectedItem = null
section = new Section()
}
</script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<div x-data="new Editor()">
<template x-if="selectedItem">
<div>
<span x-text="selectedItem.borders.right.color"></span>
<template x-if="selectedItem.isSection">
<div>
<div>
<input x-model="selectedItem.borders.right.color">
<span x-text="selectedItem.borders.right.color"></span>
</div>
</div>
</template>
<template x-if="selectedItem.isBlock">
<div>
<div>
<input x-model="selectedItem.borders.right.color">
<span x-text="selectedItem.borders.right.color"></span>
</div>
<div>
<input type="range" x-model="selectedItem.sizing.desktop">
<span x-text="selectedItem.sizing.desktop"></span>
</div>
</div>
</template>
</div>
</template>
<button @click="selectedItem = section">Section</button>
<button @click="selectedItem = section.blocks[0]">Block</button>
<button @click="selectedItem = null">null</button>
</div>
</body>
</html>To reproduce the issue:
|
Beta Was this translation helpful? Give feedback.
Answered by
ekwoka
Aug 5, 2024
Replies: 1 comment 1 reply
-
|
The issue here is the nested x-if when the inner is "true" but the outer is not. #4300 Solves it in the next release. Sometimes you may have errors with x-if/x-for that show these errors but they are being cleaned up, just one tick later, which is annoying but non desctructive. Those are also solved in #4300 |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
Thank you for your reply :) |
Beta Was this translation helpful? Give feedback.
Answer selected by
nglthach
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The issue here is the nested x-if when the inner is "true" but the outer is not.
#4300 Solves it in the next release.
Sometimes you may have errors with x-if/x-for that show these errors but they are being cleaned up, just one tick later, which is annoying but non desctructive. Those are also solved in #4300