CODEWITHSUNDEEP
javascriptvuejs2froala
mstdmstd
mstdmstd

Reputation: 3125

I failed to call component's method inside of vue-froala-wysiwyg event

in laravel 8/2.6/bootstrap 4.6/Axios app using vue-froala-wysiwyg I need to get content of entered text and call component's method with entered text. I define event as I read here https://github.com/froala/vue-froala-wysiwyg :

import VueFroala from 'vue-froala-wysiwyg' // https://froala.com/wysiwyg-editor/docs
Vue.use(VueFroala) // https://github.com/froala/vue-froala-wysiwyg

Vue.config.productionTip = false

// let self = this

export default {
    name: "RoomChat",
    components: {},

    data() {
        return {
            currentRoom: null,
            ...
            froalaEditorConfig: {
                events: {
                    initialized: function () {
                        console.log('froalaEditorConfig initialized')
                    },

                    'contentChanged': function () {    // https://froala.com/wysiwyg-editor/docs/events/
                        console.log('froalaEditorConfig contentChanged this::')
                        // this - is reference to froala component
                        console.log(this);
                        console.log('this.el::')
                        // I tryied to get ref to root component in several ways
                        console.log(this.el)  // undefined
                        console.log('this.el.$parent::')
                        console.log(this.el.$parent)  // undefined
                        console.log('this.$parent::')
                        console.log(this.$parent)  // undefined

                        console.log('froalaEditorConfig contentChanged this.html.get()::')
                        console.log(this.html.get());
                        parent.actionUser(this.html.get()) // I got parent.actionUser is not a function error
                    }, 

                },
            },
  
    ...
   
    methods: {
        actionUser(enteredText) {
        ...

Which way is valid?

ADDED : Searching for decision I found https://medium.com/dataseries/vue-js-components-parent-child-and-root-f1fcbe422feb article with this.$root described but making inside of my event :

console.log('this.$root::')
console.log(this.$root)

Undefined is outputted.

What I see inside of event outputting this : https://prnt.sc/1r6pp4y and https://prnt.sc/1r6ptoh

Thanks!

Upvotes: 0

Views: 753

Answers (1)

mstdmstd
mstdmstd

Reputation: 3125

I found decision with sending vueComponent instance as parameter :

    data:(vm) => ({
            ...
            froalaEditorConfig: {
                events: {
                    initialized: function () {
                    },

                    contentChanged () {
                        vm.actionUser(this.html.get()) // That works ok
                    }, 

                },
                ....
            },
   }), // data(vm) => ({

Upvotes: 1

Related Questions