如何基于Ajax结果修改Alpine.js中x-text元素的内容？

你的代码问题出在每次调用data()都会生成一个全新的状态对象，和页面上Alpine绑定的实例不是同一个，所以修改后不会触发视图更新。下面是两种可行的解决方法：

方法一：直接获取组件实例 #

通过x-init把当前组件实例挂载到全局，外部脚本直接调用实例方法修改状态：

<html lang="en" x-data="data()" x-init="window.emailComponent = this">
<head>
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer=""></script>
    <script>
        function data() {
            return {
                userEmail:'***',
                setEmail(newValue) {
                    this.userEmail = newValue;
                }
            }
        }
        let fn = (newValue)=>{
            window.emailComponent.setEmail(newValue);
        }
    </script>
</head>
<body>
    <div x-text="userEmail">loaded value</div>
    <button onclick="fn('new value here')">Click me</button>
</body>
</html>

方法二：使用自定义事件通信（推荐） #

通过浏览器自定义事件实现外部脚本和Alpine组件的解耦通信，避免全局变量污染：

<html lang="en" x-data="data()">
<head>
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer=""></script>
    <script>
        function data() {
            return {
                userEmail:'***',
                init() {
                    // 监听更新邮箱的自定义事件
                    document.addEventListener('update-user-email', (event) => {
                        this.userEmail = event.detail.email;
                    });
                }
            }
        }
        let fn = (newValue)=>{
            // 触发自定义事件，传递新邮箱值
            document.dispatchEvent(new CustomEvent('update-user-email', {
                detail: { email: newValue }
            }));
        }
    </script>
</head>
<body>
    <div x-text="userEmail">loaded value</div>
    <button onclick="fn('new value here')">Click me</button>
</body>
</html>

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