Question

所以我之前已经问过关于使用vue.js进行summernote的集成，并且已经在here中得到了解答，并且它与v模型绑定完美无瑕。

但是现在当我尝试创建编辑页面并从数据库加载数据时，它只是没有将这些数据显示给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，以完成这项工作。

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

1 个答案: