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

Question

创建新的Editor实例时，在onInit方法内部设置editorView的值时遇到问题。因为调用嵌套了两个方法，所以我不知道如何访问Vue实例来正确设置editorView。

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

Answer 1

虽然不理想，但一个临时的解决方案是将初始化拉到mounted内部，并将Vue实例存储到一个临时变量中。如果有人能从原始构造函数内部的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
},
})
},
}

Answer 2

我发现了这个名为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一个