How to emit html code with div <tag> inside v-model using vuejs?

I want to emit HTML code inside vue2 editor using v-model for form.content, but when i refresh my page i got an error >0.js:6493 Uncaught TypeError: Cannot read property 'emit' of undefined.

but if i manually remove div tags from the HTML code, my html code is emit successfully.

please tell me how can i emit HTML code with div tag inside vue2 editor with v-model?

Here below is my code.


   

     <template>
           <div class="content-body" id="fullHeight">   
                            <form method="post">
                            <h2 class="title2">{{title}}</h2>
                            <div class="row">
                                 <div class="col-md-4 mb-3">
                                    <label for="content" class="form-label">Content</label>
                                    <vue-editor v-model="form.content"> </vue-editor>
                                </div>                                  
                            </div>
                            <div class="col-md-3 form-group">
                                 <button type="submit" class="btn btn-info" name="save-button" @click.prevent="SubmitMessage">Submit</button>
                                 <button class="btn btn-danger" name="cancel-button" @click="back">Cancel</button>
                            </div>
                            </form> 
            </div>
        </template>
        
        <script>
        import axios from 'axios';
        import { required} from 'vuelidate/lib/validators';
        import { VueEditor } from "vue2-editor";
        export default {
            props:['model'],
             components: {VueEditor},
            data(){
                return{
                    title: 'Add Page',
                    form:{
                        content:'',
                    }
                }
            },
            mounted(){
                if(this.model!=null){
                    this.form = this.model; 
                    this.title = this.model.heading_title;
                }       
            },
            methods:{
                cancelEdit(res){
                        this.$emit('close', res);
                    },
                SubmitMessage(evt){
                    evt.preventDefault();
                    if(this.model!=null){
                        console.log(this.form); 
                        axios.post('SubmitUpdateMessage/'+this.form.id,this.form).catch(({response})=>{
                            alert(response.data.message);
                        }).then(({data}) =>{
                            this.back();
                            alert(data.message); 
                            this.cancelEdit(true);
                        });
                    }
                    else{
                        axios.post('SubmitMessage',this.form).catch(({response})=>{
                            alert(response.data.message);
                        }).then(({data})=>{
                            this.back(); 
                            alert(data.message);
                        });
                    }           
                },
                back(res = false){
                    this.$emit('close',res); 
                }
            }
        }
        </script>

form.content assigned html code values containing div also, i used to emit this code to content using v-model, but this throw me an error, Cannot read property 'emit' of undefined. please solve my problem.



Read more here: https://stackoverflow.com/questions/68464396/how-to-emit-html-code-with-div-tag-inside-v-model-using-vuejs

Content Attribution

This content was originally published by Parteek Kumar at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: