Alpine JS：更新 `$ref` 对象的属性

Question

是否可以通过 $refs 魔术变量访问 AlpineJS 来操纵 HTML 对象的样式属性？

我好像可以访问元素的属性，但是我不能更新它们！？！？在按下 button 之后，没有任何反应（从用户的角度来看）。影子只是停留在同一个地方。

我可以从控制台日志中看到该函数按预期执行运行，但如日志所示，offsetLeft 属性没有改变。

<style>
.shadow {
    color: rgba(256, 256, 256, 0.1);
    left: 500px;
}
</style>
<div x-data="{
    changeElement() {
        console.log ('shadow at', $refs.shadow.offsetLeft); // prints '500'
        $refs.shadow.offsetLeft = 20;
        console.log ('shadow at', $refs.shadow.offsetLeft); // still prints '500'!?!?!
    }
}">
    <button @click="changeElement()">Change Element</button>
    <div class="shadow" x-ref="shadow"></div>
</div>

如果 $refs 是处理此问题的错误方法，那么我该如何使用 AlpineJS 操作 DOM？

Answer 1

这不是 alpinejs 的问题。不能更改 offsetLeft 的原因是因为这是 read only field.

为了在 alpinejs 中操作 DOM 元素，我建议您使用绑定 style or class 并且您可以通过 [=] 的状态操作 class 字符串的值11=]值。

<div x-data="{ open: false }">
  <button x-on:click="open = ! open">Toggle Dropdown</button>
 
  <div :class="open ? '' : 'hidden'">
    Dropdown Contents...
  </div>
</div>

样式对象也可以做同样的事情。因此，ref magic 仅用于查询 alpinejs 中的 DOM 个元素。

Answer 2

正如@LazarNikolic 所指出的，我的问题与 Alpine 无关。 $refs.shadow对象是JavaScript对象，offsetLeft是只读对象属性>>https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft

x-data 属性中的 JavaScript 应如下所示：

changeElement() {
    console.log ('shadow at', $refs.shadow.offsetLeft); // prints '500'
    $refs.shadow.style.left = 20 + 'px'; // because in the real-world, 20 is a dynamic element
    console.log ('shadow at', $refs.shadow.offsetLeft); // prints '20'
}

Alpine JS：更新 `$ref` 对象的属性

Alpine JS: updating properties on a `$ref` object

javascript

dom

alpine.js