调整Alpine.js数据中未更新的观察者大小

Question

使用resizeObserver，我正在尝试更新Alpine.js中的数据，以便在应用程序中显示它。目前，它只显示一次数据，但在调整窗口大小时不会显示。代码笔

下方的代码

function app() {
return {
init() {
var ro = new ResizeObserver((entries) => {
for (let entry of entries) {
console.log(entry);
this.dimensions.push({
dim: `${(entry.contentRect.width / 16).toFixed(2)}rem`
});
}
});
ro.observe(this.$refs.box);
ro.observe(document.documentElement);
},
dimensions: [],
display: []
};
}

html

<div class="color"></div>
<div class="wrapper" x-data="app()">
<p class="dimension" x-text="dimensions[1].dim"></p>
<div class="box">
<p class="dimension" x-text="dimensions[0].dim" x-ref="box"></p>
<pre class="code">margin-inline: max(0px,((100% - 64rem) / 2))</pre>
</div>
</div>

Answer 1

因为您要将观察到的条目添加到数组的末尾。您还必须在最后一个条目上使用x-text，这意味着您的代码应该看起来像这样：

<div class="color"></div>
<div class="wrapper" x-data="app()">
<p class="dimension" x-text="dimensions[dimensions.length - 1].dim"></p>
<div class="box">
<p class="dimension" x-text="dimensions[dimensions.length - 1].dim" x-ref="box"></p>
<pre class="code">margin-inline: max(0px,((100% - 64rem) / 2))</pre>
</div>
</div>

或者，您应该只将dimension变量作为一个简单的单个条目，并在观察到新的内容时覆盖它。