Question

我有一个简单的JS类，在构造函数中我初始化字典。我有方法来更新或删除此词典中的项目。

export default class Items {
    constructor() {
        this.items = {};
        //Code that adds some values to it
    }
    save(item) {
        this.items[item.id] = item;
    }
    delete(itemId) {
        delete this.items[itemId];
    }
}

我有一个Vue组件，我只需用

输出这个字典中的值

<p v-for="item in items">{{item}}</p>

在挂载方法中，我创建了Items个对象，并将items字典从Vue数据分配给变量items。从Vue我调用方法保存或删除，我看到Vue数据中的字典items正在被更改，但UI没有得到更新。我知道我可以使用Vue.$delete或Vue.$set但是可以将简单的JS类与Vue隔离并将所有数据保存在JS类中吗？

我正在使用Vue 2.4.4

Answer 1

尝试使用VueJs

的力量

...

    save(item) {

        Vue.set(this.items, item.id, item);

    }

    delete(itemId) {

    let index = this.items.findIndex(p => p.id === itemId);
    Vue.delete(this.items, index);

    }

Answer 2

有理由不让Vue保留数据吗？它将能够监控它以便以这种方式进行最有效的dom更改。因此，在适当的Vue样式中，您应该将类逻辑移动到组件级别，以便该数据返回项目字典。然后附加save和delete作为组件的方法。

对于对象，只有在编辑渲染时存在的键时才会获得反应，否则，您需要提醒Vue正在添加键。这是通过Vue.set(this.items, item.id, item);完成的。

如果要将逻辑与组件分开，可以查看vuex，它允许您创建状态和突变模块。

如何从JS类中的Vue组件中隔离数据？

2 个答案: