时间戳

首页 > 解决方案 > Vue和Summernote - 从数据库加载时模型中的内容未显示在表单中

javascript - Vue和Summernote - 从数据库加载时模型中的内容未显示在表单中

问题描述

好的，我有一个表单，我在其中多次使用所见即所得的编辑器summernote。当我填写表格时，模型会正确更新，显示内容并将结果正确保存到数据库中。但是当我想编辑和加载数据库中的数据时，模型在开发人员工具中正确显示了内容，但没有任何内容显示在屏幕上。

这就是我所拥有的：

我有一个组件要加载并启动 Summernote 编辑器

<template>
    <textarea class="form-control"></textarea>
</template>
<script>
    export default{
        props : {
            model: {
                required: true
            },
            height: {
                type: String,
                default: '150'
            }
        },
        mounted() {
            let config = {
                height: this.height,
            };
            let vm = this;
            config.callbacks = {
                onInit: function () {
                    $(vm.$el).summernote("code", vm.model);
                },
                onChange: function () {
                    vm.$emit('update:model', $(vm.$el).summernote('code'));
                },
            };
            $(this.$el).summernote(config);
        }
    }
</script>

我有一个表单（这里只是其中的一部分），我将 Summernote 组件加载为html-editor：

<html-editor 
   :model.sync="form.areaOfWork" 
   :class="{ 'is-invalid': form.errors.has('areaOfWork') }" 
   name="areaOfWork" 
   id="areaOfWork"></html-editor>

在道具中，从数据库加载后，数据正​​确显示，即：

model:"<p> ... my content ...</p>"

同样，在我的表格中它显示正确，即：

form: Object
  areaOfWork: "<p> ... my content ...</p>"
  ...

但它没有显示在html-editor. 我被困住了——也许这是我忽略的超级简单的事情，但到目前为止我没有找到任何对我有帮助的东西。感谢您的想法和意见

标签： javascriptvue.jsmodelsummernote

解决方案

感谢您的回答，@soroush，但这似乎不是问题。有一个沟通，它似乎工作。我确实看到我的表格也填写了正确的数据。

在玩了很多想法之后，我找到了一个简单的解决方法：watcher

我添加了

      watch: {
        areaOfWork: (val) => {
          $('#areaOfWork').summernote("code", val);
        }
      },

到我的模板和相应的变量到我的data(). 当我调用我的数据库并读取项目时，我为观察者提供数据并且它可以工作。

不过，我不明白为什么vm.model在 onInit 回调中没有显示，但它似乎有效，我想为您提供一个答案。也许它可以帮助别人

推荐阅读