Laravel Vue实现Axios提交后无需刷新更新用户可用余额

错误原因 #

你碰到的TypeError: Cannot create property 'value'是因为page.props.auth.user.avail_balance并非Vue的ref响应式对象，不需要通过.value赋值，直接修改属性值即可。

正确实现步骤 #

1. 修复赋值逻辑：去掉.value，直接更新page.props.auth.user.avail_balance，并且优先使用后端返回的最新余额（而非硬写固定值），避免前后端数据不一致。
2. 确保响应式更新：Inertia的usePage返回的page.props本身就是响应式对象，修改其属性后，所有引用该属性的组件（包括AppLayout）会自动更新视图，无需额外转成ref。

修改后的代码 #

makeOrder.vue #

<script setup>
import { ref } from 'vue';
import { usePage } from '@inertiajs/vue3';
import axios from 'axios';

const page = usePage();
const errors = ref({}); // 初始化错误信息为ref对象

function orderSubmit () {
    // 调整数据格式为后端接口期望的结构（示例为对象，可根据实际接口修改）
    const requestData = { amount: 300 };
   
    axios.post('/orders/store', requestData)
        .then(res => {
            // 用后端返回的最新可用余额更新页面数据
            page.props.auth.user.avail_balance = res.data.avail_balance;
        })
        .catch(err => {
            if (err.response?.status === 422) {        
                errors.value = err.response.data.errors;
                errors.value.message = err.response.data.errors.messages;     
            }
        });
}
</script>

后端注意事项 #

确保/orders/store接口在处理完交易后，将更新后的用户可用余额（avail_balance）返回给前端，比如响应格式可以是：

{
    "success": true,
    "avail_balance": 700 // 假设原余额1000，交易300后剩余700
}

这样前端就能拿到准确的最新余额，实现无刷新更新AppLayout中的显示值。

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