Vue и Summernote - содержимое модели не отображается в форме при загрузке из базы данных

Question

Хорошо, у меня есть форма, в которой я несколько раз использую летнюю заметку редактора wysiwyg. Когда я заполняю форму, модель обновляется правильно, отображается содержимое и результаты правильно сохраняются в базе данных. НО когда я хочу отредактировать и загрузить данные из базы данных, модель правильно показывает содержимое в инструментах разработчика, но ничего не выводит на экран.

Это то, что У меня есть:

У меня есть компонент для загрузки и запуска редактора летних заметок

<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. Я застрял - может быть, я упускаю из виду что-то очень простое, но пока я не нашел ничего, что помогло бы мне. Спасибо за идеи и вклад

Answer 1

Спасибо за ответ, @ sorou sh, но, похоже, проблема не в этом. Связь есть и вроде работает. Я вижу, что моя форма также заполняется правильными данными.

После экспериментов с множеством идей я нашел простой обходной путь: watcher

Я добавил

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

в мой шаблон и соответствующие переменные в мой data(). Когда я вызываю свою базу данных и читаю элемент, я предоставляю данные для наблюдателя, и он работает.

Тем не менее, я не понимаю, почему vm.model в обратном вызове onInit не отображается, но, как кажется, работы, я хотел дать вам ответ. Может еще кому поможет

Answer 2

Я думаю, что проблема возникла из-за использования jquery и vue в одном проекте!

Поскольку vue использует виртуальный DOM, а jquery изменяет реальный DOM, возникает конфликт! Так что лучше не использовать их оба в одном проекте или использовать в нем jquery safe, как ссылку ниже:

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