vue.js summernote 从数据库加载数据

Question

所以我之前询问过有关 summernote 与 vue.js 集成的问题，并且已经在 here 中得到了回答，它可以完美地与 v-model 绑定配合使用。

但是现在当我尝试创建编辑页面并从数据库加载数据时，它只是没有将这些数据显示给summernote

首先我在 beforeMount() 中获取数据

beforeMount(){
    if(this.$route.meta.mode === 'edit'){
        this.initialize = '/api/artikel/edit/' + this.$route.params.id;
        this.store = '/api/artikel/update/' + this.$route.params.id;
        this.method = 'put';
    }
    this.fetchData();
},

然后这是我的 fetchData 方法

fetchData(){
    var vm = this
    axios.get(this.initialize)
        .then(function(response){
            Vue.set(vm.$data, 'form', response.data.form);
            Vue.set(vm.$data, 'rules', response.data.rules);
            Vue.set(vm.$data, 'option', response.data.option);
        })
        .catch(function(error){
        })
},

然后我把这个summernote组件放在我的表单中

<app-summernote
        name="editor"
        :model="form.content"
        :config="summernoteconfig"
        @change="value => { form.content = value }"
    ></app-summernote>

这是我的 app-summernote 模块

    module.exports = {
    template: '<textarea :name="name"></textarea>',
    props: {
        model: {
            required: true,
        },
        name: {
            type: String,
            required: true,
        },
        config: {
            type: Object,
            default: {}
        }
    },
    mounted() {
        let vm = this;
        let config = this.config;
        config.callbacks = {
            onInit: function () {
                $(vm.$el).summernote("code", vm.model);
            },
            onChange: function () {
                vm.$emit('change', $(vm.$el).summernote('code'));
            },
            onBlur: function () {
                vm.$emit('change', $(vm.$el).summernote('code'));
            }
        };
        $(this.$el).summernote(config);
    },
}

它应该将 form.content 中的数据显示到 Summernote 中，但它不起作用。

Answer 1

我设法通过在 summernote 组件上使用观察器解决了这个问题。

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

您还需要为文本字段设置一个 id 才能完成这项工作。