CODEWITHSUNDEEP
javascriptvue.jsvuejs2
PamanBeruang
PamanBeruang

Reputation: 1589

vue.js summernote load data from database

So i have ask before about integration for summernote with vue.js and already been answered in here and it works flawlessly with v-model binding.

But now when I tried to create edit page and load the data from database, it just not showing those data to summernote

first I fetchData in 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();
},

and then here is my fetchData methods

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){
        })
},

and then in my form i put this summernote component

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

and here is my app-summernote modules

    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);
    },
}

and it should be showing data from form.content into summernote, but it's not working.

Upvotes: 0

Views: 844

Answers (1)

slikkes
slikkes

Reputation: 11

I managed to solve this by using a watcher on the summernote component.

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

You also need to set an id for the text field to get this work.

Upvotes: 1

Related Questions