Question

我正在尝试在提交表单中添加自定义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>

component.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是一个富文本文本编辑器组件。

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

Answer 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>

如何在Laravel刀片中提交vue组件？

1 个答案: