Laravel Vue.js获取初始值：Vue读取服务端值并用于Axios请求

这个问题我之前也碰到过，核心原因是Vue的v-model会优先使用你在data里定义的初始值（这里是空字符串），直接把服务端渲染的value给覆盖了。下面给你几个靠谱的解决方案，保证能让Vue拿到服务端的初始值，同时不影响后续的双向绑定和Axios请求：

方法一：直接从DOM读取初始值初始化data #

修改Vue实例的data部分，把title的初始值设为输入框已经渲染好的value：

<input type="text" id="title" name="title" value="{{ $snippet->title }}" v-model="title">

new Vue({
    el: '#snippet-form',
    data: {
        // 直接从DOM元素获取服务端渲染的值
        title: document.getElementById('title').value,
    },
    methods: {
        publishSnippet (e) {
            var self = this;
            axios.post('/snippets', {
                title: this.title,
            })
            .then(function (response) {
                console.log("success");
            })
            .catch(function (error) {
                console.log(error);
            })
        },
    },
});

⚠️ 注意：要确保这段Vue代码在输入框元素之后执行，或者用DOMContentLoaded事件包裹，避免找不到元素的情况。

方法二：用自定义属性存储初始值，在Vue钩子中读取 #

先给输入框加一个自定义data-*属性存初始值：

<input type="text" id="title" name="title" value="{{ $snippet->title }}" v-model="title" data-init="{{ $snippet->title }}">

然后在Vue的mounted钩子中把这个值赋值给data里的title：

new Vue({
    el: '#snippet-form',
    data: {
        title: '',
    },
    mounted() {
        // 读取自定义属性的值
        this.title = this.$el.querySelector('#title').dataset.init;
        // 或者给input加ref="title"，用this.$refs.title.dataset.init更直接
    },
    methods: {
        publishSnippet (e) {
            var self = this;
            axios.post('/snippets', {
                title: this.title,
            })
            .then(function (response) {
                console.log("success");
            })
            .catch(function (error) {
                console.log(error);
            })
        },
    },
});

这种方法更适合多表单字段的场景，不用逐个操作DOM元素。

方法三：直接注入服务端值到Vue（推荐，更符合Vue风格） #

如果是Laravel这类框架，可以直接把服务端变量注入到Vue的data里，用@json指令避免字符串转义问题：

new Vue({
    el: '#snippet-form',
    data: {
        // 直接把服务端的值传给Vue的data
        title: @json($snippet->title),
    },
    methods: {
        publishSnippet (e) {
            var self = this;
            axios.post('/snippets', {
                title: this.title,
            })
            .then(function (response) {
                console.log("success");
            })
            .catch(function (error) {
                console.log(error);
            })
        },
    },
});

这种方式不需要操作DOM，Vue初始化时就拿到了正确的初始值，v-model会基于这个值进行双向绑定，后续Axios请求自然就能正常使用这个值了。

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