Alpine.js中将class绑定到$el.value不生效的问题咨询

问题原因 #

• $el 在 :class 初始化绑定阶段无法正确获取当前元素实例，初始取值就存在问题
• 核心问题是 $el.value 不属于 Alpine 的响应式变量，输入内容修改值时 Alpine 感知不到变化，不会触发 :class 的重新计算，自然不会更新元素class。你点击时能打印正确值是因为点击事件触发时运行时能拿到当前$el的取值，但这个事件本身不会触发class绑定的重新渲染。

解决方法 #

把输入框的值绑定到 Alpine 响应式变量上，用 x-model 实现双向绑定，再把响应式变量关联到:class即可，示例代码如下：

<div x-data="{ inputValue: '' }">
  <input 
    type="text" 
    x-model="inputValue"
    :class="inputValue" 
    @click="console.log(inputValue)" 
  />
</div>

修改后只要输入框内容变化，inputValue响应式变量会同步更新，:class会自动跟随变量值修改，动态添加对应的class。

内容的提问来源于stack exchange，提问作者Moss