Laravel5.5+Vue.js：如何将JS变量传入Vue实例实现表单回显？

嘿，刚好之前我在Laravel+Vue的项目里处理过几乎一模一样的场景，给你几个实用的解决方案，帮你搞定表单验证失败后Vue输入框回显旧值的问题：

先在你的Blade视图里，用Laravel的old()助手把上次的表单值赋值给全局JS变量，再在Vue实例里直接引用它：

在Blade模板的<script>标签里定义全局变量：

<script>
// 把需要回显的字段都列在这里
window.formOldData = {
    username: '{{ old('username') }}',
    email: '{{ old('email') }}',
    password: '' // 密码一般不回显，按需调整
};
</script>

然后在app.js的Vue实例里，把这个全局变量作为表单数据的初始值：

new Vue({
    el: '#app',
    data() {
        return {
            form: {
                username: window.formOldData.username || '',
                email: window.formOldData.email || '',
                // 对应你的其他表单字段
            }
        }
    },
    // 其他Vue逻辑...
});

之后Vue组件里的输入框用v-model="form.username"绑定，刷新页面后就会自动填充上次的输入内容了。

如果不想用全局变量，可以把旧数据通过组件props传递，避免全局污染：

首先在Laravel控制器里把旧数据共享到视图：

return view('your-form-page')->with('oldFormValues', old());

然后在Blade视图的Vue组件挂载标签上，把旧数据通过props传进去：

<custom-form-component :old-values="{{ json_encode($oldFormValues) }}"></custom-form-component>

接着在你的Vue组件里定义props并初始化表单数据：

Vue.component('custom-form-component', {
    props: ['oldValues'],
    data() {
        return {
            form: {
                username: this.oldValues.username || '',
                email: this.oldValues.email || '',
                // 对应字段
            }
        }
    },
    // 组件的其他代码...
});

如果你的项目是单页应用，不想刷新页面，可以把旧数据存在Laravel Session里，前端通过接口获取：

首先在Laravel验证失败时把表单数据存入Session（其实Laravel默认已经帮你存了，这里手动确保一下）：

$validator = Validator::make($request->all(), [
    // 你的验证规则
]);

if ($validator->fails()) {
    session()->flash('oldFormData', $request->all());
    return redirect()->back()->withErrors($validator);
}

然后在Vue的created钩子中请求接口获取旧数据：

new Vue({
    el: '#app',
    data() {
        return {
            form: {
                username: '',
                email: ''
            }
        }
    },
    created() {
        axios.get('/api/get-old-form-data')
            .then(res => {
                if (res.data) {
                    // 合并旧数据到表单
                    this.form = { ...this.form, ...res.data };
                }
            });
    }
});

最后在Laravel里加个路由和方法返回旧数据：

Route::get('/api/get-old-form-data', function() {
    return session('oldFormData') ?? [];
});

另外要注意：如果是自定义的Vue输入组件，要确保v-model的逻辑正确（通过value props和input事件触发），不然可能出现数据不响应的情况。

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