Как избежать использования Vue .set () во внешних файлах класса js, сохраняющих реактивность для свойств вложенных объектов?

Question

У меня есть этот компонент:

<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>
//.......................

Я пытаюсь использовать editor.view.toolbarManager.buttons в пределах v-for l oop. Vue devtools показывает мне (для всех 3 приведенных ниже случаев), что editor.view.toolbarManager.buttons является объектом и содержит 4 свойства, которые содержат другой объект.

<script>
export default {
    data: function() {
    return {
        editor: new Editor({
            doc: this.value,
            init: this.init,
        }),
    }
    },

editor.view.toolbarManager.buttons заполняет подклассы Editor() класс с динамически импортируемыми скриптами, такими как:

props.plugins.forEach(plugin => {
    this.plugins[plugin] = import(/* webpackMode: "eager" */ '../plugin/' + plugin);
});

Я заполняю editor.view.toolbarManager.buttons следующим образом:

// case 1: works fine as expected
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,
};
*/

Проблема заключается в следующем: когда я пытаюсь визуализировать {{editor.view.toolbarManager.buttons}} в шаблоне Я вижу пустой объект для случаев 2 и 3 следующим образом:

{}

, что означает vue реактивность нарушена. Editor() - это внешний класс, и я не хочу ie Vue. Vue Реактивность хороша для внешних классов для массивов из-за использования методов splice / pu sh. Существуют ли аналогичные методы для свойств объекта с сохранением Vue реактивности?

Answer 1

О! Я запутался с Object.assign(). Это правильное использование Object.assign() вместо Vue.set():

var button = {};

button[name] = {
    component,
    options,
};

this.buttons = Object.assign({}, this.buttons, button);

Это прекрасно работает для меня. И документация здесь https://vuejs.org/v2/guide/reactivity.html#For -объекты :

// instead of `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })