I previously inquired about integrating summernote with vue.js and received a helpful response here. It worked seamlessly with v-model binding.
However, I encountered an issue when attempting to load data from the database for an edit page. The data was not displaying in summernote.
Firstly, I fetched the data in the beforeMount() hook:
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();
},
Here is my fetchData method:
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){
})
},
Next, I added the summernote component to my form:
<app-summernote
name="editor"
:model="form.content"
:config="summernoteconfig"
@change="value => { form.content = value }"
></app-summernote>
Below is my app-summernote module:
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);
},
}
Even though I expected the data from form.content to display in summernote, it's not functioning as intended.