Блог

в приложении laravel 8/2.6/bootstrap 4.6/Axios с использованием vue-froala-wysiwyg мне нужно получить содержимое введенного текста и вызвать метод компонента с введенным текстом. Я определяю событие так, как я читаю здесь 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) {
        ...

    
 

Какой способ действителен?

ДОБАВЛЕНО : В поисках решения я нашел https://medium.com/dataseries/vue-js-components-parent-child-and-root-f1fcbe422feb статья с этим.$root описана, но сделана внутри моего события :

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

Выводится значение Не определено.

Что я вижу внутри события, выводящего это : https://prnt.sc/1r6pp4y и https://prnt.sc/1r6ptoh

Спасибо!

Я нашел решение с отправкой экземпляра vueComponent в качестве параметра :

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

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

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