In my possession is this particular component:
<template>
<div class="simple-editor">
{{editor.view.toolbarManager.buttons}}
<component
v-for="(button, name) in editor.view.toolbarManager.buttons"
:is="button.component"
:options="button.options"
:key="name"
></component></div>
//.......................
I am attempting to incorporate
editor.view.toolbarManager.buttonsv-for loop. According to Vue devtools, the object editor.view.toolbarManager.buttons<script>
export default {
data: function() {
return {
editor: new Editor({
doc: this.value,
init: this.init,
}),
}
},
The values of
editor.view.toolbarManager.buttonsEditor() class through dynamically imported scripts like so:
props.plugins.forEach(plugin => {
this.plugins[plugin] = import(/* webpackMode: "eager" */ '../plugin/' + plugin);
});
To populate
editor.view.toolbarManager.buttons// case 1: functions as intended
Vue.set(this.buttons, name, {
component,
options,
});
/* case 2: loses vue reactivity
var button = {};
button[name] = {
component,
options,
};
Object.assign(this.buttons, button);
*/
/* case 3: loses vue reactivity
this.buttons[name] = {
component,
options,
};
*/
The problem arises when attempting to render
{{editor.view.toolbarManager.buttons}}{}
This indicates that the Vue reactivity is disrupted. Since Editor() is an external class that I prefer not to bind with Vue, maintaining reactivity using splice/push methods commonly used with arrays is not feasible. Are there similar methods available to maintain Vue reactivity with object properties?