Блог

Главная - Вопросы по программированию - Alpine JS: обновление свойств объекта `$ ref`

Alpine JS: обновление свойств объекта `$ ref`

#javascript #dom #alpine.js

#javascript #dom #alpine.js

Вопрос:

Можно ли управлять свойствами стиля HTML-объекта с помощью AlpineJS, обращаясь к нему через $refs магическую переменную?

Кажется, что я могу получить доступ к свойствам элемента, но я не могу их обновить !?!? После нажатия 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 это неправильный подход к этому, то как мне манипулировать DOM с помощью AlpineJS?

Ответ №1:

Это не проблема с alpinejs. Причина, по которой вы не можете изменить offsetLeft, заключается в том, что это поле доступно только для чтения.

Чтобы манипулировать элементами DOM в alpinejs, я предлагаю вам использовать привязку либо к стилю, либо к классу, и вы можете манипулировать значением строки класса по состоянию вашего data значения.

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

То же самое можно сделать с объектом style. Итак, ref magic используется только для запроса элементов DOM в alpinejs.

Комментарии:

1. По сути, вы правы, и в некоторых случаях :style это может сработать, но на самом деле это не тот ответ, который я искал (см. Мой ответ). Кроме того, почему все всегда используют этот глупый open / hidden example вместо того, чтобы перейти к чему-то более сложному и реальному, чтобы проиллюстрировать, что Alpine существует не только для прошивки некоторых <div> s? Ваш пример вообще не добавляет к вашему ответу :-/

Ответ №2:

Как указал @LazarNikolic, моя проблема не связана с Alpine. $refs.shadow Объект является объектом JavaScript и доступен offsetLeft только для чтения >> https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft

JavaScript внутри x-data атрибута должен выглядеть следующим образом:

 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'
}
Метки: