Vue和Summernote -从db加载时模型中未以形式显示的内容

Question

好的，我有一种形式，我使用wysiwyg编辑器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>

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

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

同样，它以我的形式正确地显示出来，即：

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

但它没有在html-editor中显示。我被困住了--也许这是我忽略的非常简单的东西，但到目前为止，我没有找到任何帮助我的东西。谢谢你的意见和建议

Answer 1

我认为问题源于在一个项目中使用jquery和vue！

因为vue使用虚拟DOM，jquery改变了真正的DOM，这就产生了冲突！因此，最好不要在一个项目中同时使用它们，或者在其中使用jquery，比如下面的链接：

https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

Answer 2

“谢谢你的回答，”索鲁斯，但这似乎不是问题所在。有一种沟通方式，而且似乎奏效了。我也看到我的表格上填写了正确的数据。

在玩弄了无数的想法之后，我发现了一个简单的解决方法:观察者。

我加了

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

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

不过，我还是不明白为什么vm.model在onInit回调中没有显示出来，但由于它似乎有效，我想给您提供一个答案。也许这对其他人有帮助

Answer 3

HTML：

<textarea class="summernote-editor"name="memo_content"id="memo_content"</textarea>

联署材料：

$('#memo_content').summernote("code", response.data.res.memo_content);