如何在 Laravel Blade 中提交 vue 组件？答案

【问题标题】：How to submit a vue component in Laravel blade?如何在 Laravel Blade 中提交 vue 组件？
【发布时间】：2017-10-28 01:18:33
【问题描述】：

我正在尝试在提交表单中添加自定义 vue 组件。这是我的刀片模板代码：

<form action="/question/{{ $question->id }}" method="post">
<label for="title">Description</label>
<editor-by-vue editcontent='{!! $question->body !!}'></editor-by-vue>
<button type="submit">Publish</button>
</form>

组件.vue

<template>
<vue-editor  v-model="content" :editorToolbar="customToolbar">
    <slot></slot>
</vue-editor>
</template>
<script>
import { VueEditor } from 'vue2-editor'
export default {
    props: ['editcontent'],
    components: {
        VueEditor
    },
    mounted() {
        this.content = this.editcontent;
    },
    data() {
        return {
            content: '',
            customToolbar: [
                ['bold', 'italic', 'underline'],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                ['image', 'code-block']
            ]
        }
    }
}
</script>

vue2-editor 是一个富文本编辑器组件。

当我点击提交按钮时，如何获取请求中编辑器的内容？有人可以帮助我吗？

【问题讨论】：

您需要在包含文本的元素上设置名称属性。检查您的 HTML 并查看组件生成的内容。如果没有 name-attribute 或者根本没有像 textarea 这样的表单控制元素，只需创建自己的隐藏字段并在组件中更改后立即将内容添加到其中。否则，使用 ajax 直接从您的组件发布数据当然也是一种选择。
@Quasdunk 您应该将其添加为回复，以便我们投票。
@MarcoAurélioDeleu 谢谢，但这更多的是关于尝试什么而不是真正答案的建议，因为我不确定这是否有效/解决了问题。如果这就是他的工作方式，OP 需要报告。
@Quasdunk 这让事情变得复杂。只需制作一个表单组件。
@Shawn_Rong 对不起，我不明白你的意思。如果您想出了解决问题的好方法，请将其作为答案发布并接受。

标签： laravel vue.js

【解决方案1】：

Vue 编辑器仅在内部与 div 配合使用，使用您的原始数据添加隐藏字段

<template> 
  <vue-editor  v-model="content" :editorToolbar="customToolbar"> 
    <input type="hidden" name="content" v-bind:value="content" />
     <slot></slot> 
  </vue-editor> 
</template>

【讨论】：