Question

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

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

new 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

您必须使用use 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',
});

在您的刀片视图中，使用SnippetForm.vue组件，如：

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

Laravel vuejs获得了初始价值

1 个答案: