javascript - Laravel vue js获取初始值

Question

我想用我的服务器的值自动填充我的输入值，如果我不使用 vue，这可以工作，但由于我出于其他原因使用 vue，所以它不会。Vue 用空字符串覆盖该值，我的 vue 如何获取该值并在我的 axios 帖子中更新它。

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

新的 Vue({

el: '#snippet-form',

data: {
    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);
        })
    },

},

});

Answer 1

您必须使用 props它允许您将值传递给组件。问题是，你不能在 Vue 根实例上使用它。您需要使用组件。

在您的 resources/assets/js/components/ 中，创建一个文件夹/文件SnipperForm/SnippetForm.vue .

SnippetForm.vue ，将类似于:

<template>
    <form>
        <input type="text"
            id="title"
            name="title"
            v-model="title">

        <button @click.prevent="publishSnippet()">Submit</button>
    </form>
</template>

<script>
    export default {
        props: {
            snippetTitle: {
                type: String,
                default: ''
            },
        },
        data: {
            title: '',
        },
        mounted() {
            this.title = this.snippetTitle;
        },
        methods: {
            publishSnippet () {
                axios.post('/snippets',  {
                    title: this.title,
                })
                .then(function (response) {
                    console.log("success");
                })
                .catch(function (error) {
                  console.log(error);
                })
            },
        },
    }
</script>

最后，在你的 app.js 中:

Vue.component('snippet-form', require('SnippetForm/SnippetForm.vue'));

还有你的 app.js ，编辑您的 Vue 实例:

const app = new Vue({
    el: '#app',
});

在 Blade View 中，使用 SnippetForm.vue 组件，例如:

<snippet-form snippet-title="{{ $snippet->title }}"><snippet-form>