javascript - Vue在tiptap编辑器构造函数中设置数据属性

Question

创建新实例时无法设置方法editorView内部的值。因为调用嵌套了两个方法，我不确定如何访问 Vue 实例来正确设置.onInitEditoreditorView

data: function() {
    return {
        editor: new Editor({
            onInit: ({ state, view }) => {
                this.editorView = view
            },
        }),
        editorView: null,
    }
},

Answer 1

我发现了这个名为tiptap的库，根据它的事件，你可以这样做：

data: function() {
    return {
        editor: new Editor(),
        editorView: null,
    }
},
mounted(){
 this.editor.on('init', ({ state, view }) => {
   this.editorView = view
})
}

或者

data: function() {
    return {
        editor: null,
        editorView: null,
    }
},
mounted(){
 let that=this;
 this.editor=new Editor({
            onInit: ({ state, view }) => {
                that.editorView = view
            },
        })
}

由于this是指Editor实例而不是Vue一

Answer 2

虽然不理想，但临时解决方法是将初始化拉入内部mounted并将 Vue 实例存储到 temp var。如果有人有办法从原始构造函数中的 init 回调访问 Vue 实例，我将不胜感激。谢谢！

    mounted: function() {
        this.initializeEditor() 
    },
    methods: {
        initializeEditor() {
            var self = this
            this.editor = new Editor({
                onInit: ({ state, view }) => {
                    console.log('Editor Initialized.')
                    console.log('Editor view: ')
                    self.editorView = view
                },
            })
        },
    }