Alpine JS + Laravel：点击单选按钮运行函数并显示结果

你需要把函数的返回值绑定到一个可响应的变量上，再通过x-text渲染到页面，而不是只在控制台输出。以下是修改方案：

核心步骤 #

1. 在Alpine组件的data中新增变量存储函数结果
2. 在$watch回调中把函数返回值赋值给这个变量
3. 页面上用x-text绑定该变量展示内容

修改后的完整代码 #

<div x-data="{ Dates: [], Three: '', functionResult: '' }">
    <!-- 单选按钮列表 -->
    <template x-for="Date in Dates" :key="Date.id">
        <tr>
            <td><input x-model="Three" name="CheckThing1" type="radio" :value="Date.Location_Name" /></td>                                
            <td><span x-text="Date.Date"></span></td>
        </tr>
    </template>

    <!-- 展示函数结果的表格 -->
    <table>
        <tr>
            <th>Data1</th>
        </tr>
        <tr>
            <td>
                <span 
                    x-init="$watch('Three', value => { functionResult = Test123(value) })" 
                    x-text="functionResult"
                ></span>
            </td>
        </tr>
    </table>
</div>

<script>
// 示例函数，可根据选中值返回对应内容
function Test123(selectedValue) {
    // 这里可以替换成你的数据库查询逻辑
    return `选中的位置：${selectedValue}，这是函数返回的结果`;
}
</script>

异步场景处理（比如数据库查询） #

如果你的Test123是异步函数（比如调用API查询数据库），需要用async/await处理：

// 异步函数示例
async function Test123(selectedValue) {
    // 模拟数据库请求
    const response = await fetch(`/api/get-data?location=${selectedValue}`);
    return await response.text();
}

// 修改x-init中的回调
x-init="$watch('Three', async value => { functionResult = await Test123(value) })"

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