时间戳

首页 > 解决方案 > 如何避免在外部 js 类文件中使用 Vue.set() 来保留嵌套对象属性的反应性？

vue.js - 如何避免在外部 js 类文件中使用 Vue.set() 来保留嵌套对象属性的反应性？

问题描述

我有这个组件：

<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循环内使用。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.buttonsEditor()正在使用动态导入的脚本填充类的子类，如下所示：

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()是外部类，我不想将它绑定到 Vue。由于使用拼接/推送方法，Vue 反应性适用于数组的外部类。是否存在具有保留 Vue 反应性的对象属性的类似方法？

标签： vue.jsvue-reactivity

解决方案

哦！我搞砸了Object.assign()。这是使用 ofObject.assign()而不是的权利Vue.set()：

var button = {};

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

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

这对我来说很好。文档在这里https://vuejs.org/v2/guide/reactivity.html#For-Objects：

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

推荐阅读