Alpine.js中x-text在变量更新时不生效问题求助

你的问题核心在于每次调用wordcount()都会生成全新的组件实例：

• x-data绑定的是页面初始化时创建的第一个实例，<p x-text="wc">关联的是这个实例的wc变量
• 而textarea的@keyup="wordcount().updateWordCount()"每次触发都会创建新实例，调用的是新实例的方法，修改的是新实例的wc和全局变量，和x-data绑定的实例完全无关，所以页面上的x-text自然不会同步更新。

修正方案 #

把textarea放到x-data的作用域内，直接调用组件实例的方法，同时移除多余的全局变量：

修正后的HTML代码

<div x-data="wordcount()" class="wordcount-container">
  <p x-text="wc"></p>
  <textarea id="writing" @keyup="updateWordCount()"></textarea>
</div>

修正后的JS代码

function wordcount(){
    return {
        wc: 0,
        updateWordCount(){
            this.wc = document.getElementById("writing").value.length;
        }
    }
}

原理说明 #

将textarea纳入x-data的作用域后，@keyup触发的updateWordCount()就是当前组件实例的方法，修改的是实例自身的wc变量。Alpine.js会自动监听组件内部状态变化，一旦wc更新，就会同步刷新x-text绑定的内容。全局变量在此处完全多余，Alpine组件的状态由自身管理即可。

内容的提问来源于stack exchange，提问作者Bình Ông