首页 > 解决方案 > 使用summernote时没有保存说明

问题描述

我正在尝试创建一个页面,当您单击创建产品按钮时,会弹出一个模式,然后您输入您喜欢的任何内容。

我使用summernote 作为我的所见即所得编辑器,我也使用vue 作为我的前端。

我遇到的问题是我的描述没有被保存。

在我的 layouts.app 中,我有 Summernote 的 CDN。

这是我的代码

我的 Create.vue

<template>
    <transition name="modal-fade">
        <div>
            <div class="modal-backdrop show"></div>
            <div class="modal" style="display: inline;">
                <div class="modal-dialog modal-dialog-scrollable" role="document" style="width: 680px; max-width: 680px;">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Create Product</h5>
                            <button type="button" class="close" @click="close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>

                        <div class="modal-body">
                            <div>
                                <label>Name</label>
                                <input type="text" class="form-control" v-model="name">
                            </div>

                            <div class="mt-2">
                                <label>Description</label>
                                <textarea id="summernote" v-model="description"></textarea>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" @click="close">Close</button>
                            <button type="button" class="btn btn-success" @click="save">Save</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
    export default {
        props: [],
        data() {
            return {
                name: null,
                description: null,
            }
        },
        methods: {
            close() {
                this.$emit('close');
            },
            save() {
                var description = document.getElementById("summernote").value;

                axios.post('/admin/products', {
                    name: this.name,
                    description: description,
                }).then((response) => {

                });
            }
        },
        mounted(){
            $('#summernote').summernote();
        }
    }
</script>

<style>
    .modal-fade-enter,
    .modal-fade-leave-active {
        opacity: 0;
    }

    .modal-fade-enter-active,
    .modal-fade-leave-active {
        transition: opacity .25s ease

标签: laravelvue.js

解决方案


推荐阅读