Alpine x-data为何不响应自身属性变更？DOM查询结果异常排查

问题背景 #

现有一个基于Blade的Input组件，代码如下：

@props([
'disabled' => false,
'hidden' => false,
'type' => 'text',
'state' => null,
'borderClass' => ''
])

@php
switch ($state){
    case 'alert':
        $borderClass = 'border-2 border-red-600';
        break;
    case 'success':
        $borderClass = 'border-2 border-green-600';
        break;
}

@endphp

<input x-data="{
    borderClass: @js($borderClass),
    removeBorderClass() {

        // for testing
        document.querySelectorAll('[x-data]').forEach(el => {
            console.log(el);
        });
        console.log(document.getElementById('title'));
        // end for testing

        if (@js($borderClass)){
            let classes = this.borderClass.split(' ');
            $refs.input.classList.remove(...classes);
        }
    }
}"
    x-ref="input"
    x-on:focus="removeBorderClass()"

    value = "{{ $slot ?? '' }}"
    type = "{{ $type }}"
    {{ $disabled ? 'disabled' : '' }}
    {{ $hidden ? 'hidden' : '' }}
    {{ $attributes->merge(['class' => 'focus:ring-indigo-600 focus:border-indigo-600 focus:border shadow-sm sm:text-sm rounded-md border-gray-300 ' . $borderClass]) }}
 >

修改$state与$borderClass属性后，DOM中已正确添加border-2 border-red-600类（页面边框颜色更新），但触发x-on:focus调用removeBorderClass方法时，Alpine.js未按预期移除边框类。

为排查问题，在removeBorderClass中添加测试代码：

// for testing
document.querySelectorAll('[x-data]').forEach(el => {
    console.log(el);
});
console.log(document.getElementById('title'));
// end for testing

浏览器控制台返回两种查询结果：

1. 按[x-data]选择器查询到的Input元素：

<input x-data="{
    borderClass: '',
    removeBorderClass() {

        // for testing
        document.querySelectorAll('[x-data]').forEach(el => {
            console.log(el);
        });
        console.log(document.getElementById('title'));
        // end for testing

        if (''){
            let classes = this.borderClass.split(' ');
            $refs.input.classList.remove(...classes);
        }
    }
}" x-ref="input" x-on:focus="removeBorderClass()" value="" type="text" class="focus:ring-indigo-600 focus:border-indigo-600 focus:border shadow-sm sm:text-sm rounded-md border-gray-300  w-full" style="margin-right: -2.75rem;" name="depth" wire:model.lazy="depth" placeholder="0" title="depth">

2. 按id查询到的Input元素：

<input x-data="{
    borderClass: 'border-2 border-red-600',
    removeBorderClass() {

        // for testing
        document.querySelectorAll('[x-data]').forEach(el => {
            console.log(el);
        });
        console.log(document.getElementById('title'));
        // end for testing

        if ('border-2 border-red-600'){
            let classes = this.borderClass.split(' ');
            $refs.input.classList.remove(...classes);
        }
    }
}" x-ref="input" x-on:focus="removeBorderClass()" value="" type="text" class="focus:ring-indigo-600 focus:border-indigo-600 focus:border shadow-sm sm:text-sm rounded-md border-gray-300 border-2 border-red-600 w-full" wire:model.lazy="title" name="title" id="title">

疑问 #

• 为何两种查询方式返回的元素内容不一致？
• 如何让Alpine.js正确响应$state/$borderClass的属性变更？

问题分析与解决 #

1. 两种查询结果不一致的原因 #

页面上存在两个独立的Input组件实例：

• 一个是name="depth"、无id的实例，它的borderClass为空字符串，对应[x-data]选择器查询到的结果；
• 另一个是id="title"、name="title"的实例，它的borderClass是border-2 border-red-600，对应id查询的结果。

document.querySelectorAll('[x-data]')会返回所有带x-data属性的元素，其中包含了未修改状态的depth输入框，而你仅关注title输入框，因此看起来结果不一致。

2. 让Alpine.js响应属性变更的解决方案 #

核心问题是：Blade渲染的初始值未与Alpine.js的响应式状态绑定，后端$borderClass更新后，Alpine内部的borderClass仍保留初始渲染的旧值，导致方法执行时使用错误的类名。

修复步骤：

（1）绑定后端属性到Alpine响应式状态

通过DOM属性传递后端值，再用x-init同步到Alpine状态，替代硬编码的@js($borderClass)：

<input x-data="{
    borderClass: '',
    removeBorderClass() {
        let classes = this.borderClass.split(' ');
        $refs.input.classList.remove(...classes);
    }
}"
x-init="borderClass = $el.dataset.borderClass"
data-border-class="{{ $borderClass }}"
x-ref="input"
x-on:focus="removeBorderClass()"
{{-- 其他属性保持不变 --}}
>

（2）移除方法中静态的Blade判断

原代码中if (@js($borderClass))是Blade渲染的静态值，不会随属性变更更新，应直接判断Alpine内部的响应式状态：

removeBorderClass() {
    if (this.borderClass) { // 使用响应式的borderClass判断
        let classes = this.borderClass.split(' ');
        $refs.input.classList.remove(...classes);
    }
}

（3）Livewire环境下的额外处理

如果是Livewire触发的属性变更，需通过事件同步Alpine状态，同时用wire:ignore.self避免Livewire覆盖Alpine状态：

<input x-data="{
    borderClass: '',
    removeBorderClass() {
        if (this.borderClass) {
            let classes = this.borderClass.split(' ');
            $refs.input.classList.remove(...classes);
        }
    }
}"
x-init="borderClass = $el.dataset.borderClass"
x-on:livewire:update="borderClass = $el.dataset.borderClass"
data-border-class="{{ $borderClass }}"
wire:ignore.self
x-ref="input"
x-on:focus="removeBorderClass()"
{{-- 其他属性保持不变 --}}
>

最终修复后的组件代码 #

@props([
'disabled' => false,
'hidden' => false,
'type' => 'text',
'state' => null,
'borderClass' => ''
])

@php
switch ($state){
    case 'alert':
        $borderClass = 'border-2 border-red-600';
        break;
    case 'success':
        $borderClass = 'border-2 border-green-600';
        break;
}
@endphp

<input x-data="{
    borderClass: '',
    removeBorderClass() {
        if (this.borderClass) {
            let classes = this.borderClass.split(' ');
            $refs.input.classList.remove(...classes);
        }
    }
}"
x-init="borderClass = $el.dataset.borderClass"
x-on:livewire:update="borderClass = $el.dataset.borderClass" {{-- 仅Livewire环境需要 --}}
data-border-class="{{ $borderClass }}"
x-ref="input"
x-on:focus="removeBorderClass()"
value="{{ $slot ?? '' }}"
type="{{ $type }}"
{{ $disabled ? 'disabled' : '' }}
{{ $hidden ? 'hidden' : '' }}
{{ $attributes->merge(['class' => 'focus:ring-indigo-600 focus:border-indigo-600 focus:border shadow-sm sm:text-sm rounded-md border-gray-300 ' . $borderClass]) }}
>

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