让slug保存在vue中

Question

我正在使用Vue和Laravel，我正在尝试创建一个在您输入时创建slug的产品表单。我设法得到当您输入时出现的sl子，但我不确定如何将其保存到数据库中。

我的vue

<template>
    <div class="product-form">
        <form v-on:submit="onSubmit(model)">
            <div class="form-group">
                <label for="title">Title</label>
                <input type="text" id="title" class="form-control" name="title" v-model="model.title">
                <input type="hidden" name="slug" title="slug" :value="slug(model.title)">
                <p>{{ slug(model.title) }}</p>
            </div>
            <input type="submit" class="btn btn-default" value="Save"></input>
        </form>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                model: {
                    title: '',
                    slug: '',
                },
            };
        },
        methods: {
             slug() {
                var title = this.model.title;
                var slug_test = title.replace(/s+/g, '-');
                return slug_test;
            },
            onSubmit: function(model){
                event.preventDefault();
                this.$http.post('/database/articles', model)
            }
        },
    }
</script>

Answer 1

足以使模型的 slug属性与title属性保持最新。这里最干净的方法是您的title上的观察者，它会在将slug更新或通过计算model.slug之前将其发布到服务器。

Answer 2

如果您使用的是Laravel