-
|
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/[email protected]/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.
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.
-
|
Thank you for your reply :) |
Beta Was this translation helpful? Give feedback.
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