it('fire change for prop addition/deletion in non-deep mode', done => { new Watcher(vm, 'b', spy) Vue.set(vm.b, 'e', 123) waitForUpdate(() => { expect(spy).toHaveBeenCalledWith(vm.b, vm.b) expect(spy.calls.count()).toBe(1) Vue.delete(vm.b, 'e') }).then(() => { expect(spy.calls.count()).toBe(2) }).then(done) })
function removeField(doc, path) { assert(path.length > 0); // This works both for objects and arrays, even if "path[0]" is a stringified number. if (!doc.hasOwnProperty(path[0])) { // It seems this has already been removed. return; } if (path.length === 1) { Vue.delete(doc, path[0]); return; } removeField(doc[path[0]], path.slice(1)); }
addChange(state, { type, payload }) { switch (type) { case 'add': case 'delete': Vue.set(state.changes, type, state.changes[type].concat([payload])) break case 'update': let hasChange = state.changes.update.hasOwnProperty(payload.id) let originalNote = (state.notebook.notes || []).find(n => n.id === payload.id) if (originalNote && originalNote.content === payload.content && hasChange) { Vue.delete(state.changes.update, payload.id) } else { Vue.set(state.changes.update, payload.id, payload) } break } }
it('warning set/delete on Vue instance root $data', done => { const data = { a: 1 } const vm = new Vue({ template: '<div>{{a}}</div>', data }).$mount() expect(vm.$el.outerHTML).toBe('<div>1</div>') Vue.set(data, 'a', 2) waitForUpdate(() => { expect(vm.$el.outerHTML).toBe('<div>2</div>') expect('Avoid adding reactive properties to a Vue instance').not.toHaveBeenWarned() Vue.delete(data, 'a') }).then(() => { expect('Avoid deleting properties on a Vue instance').toHaveBeenWarned() expect(vm.$el.outerHTML).toBe('<div>2</div>') Vue.set(data, 'b', 123) expect('Avoid adding reactive properties to a Vue instance').toHaveBeenWarned() }).then(done) })
it('fire change for prop addition/deletion in non-deep mode', done => { new Watcher(vm, 'b', spy) Vue.set(vm.b, 'e', 123) waitForUpdate(() => { expect(spy).toHaveBeenCalledWith(vm.b, vm.b) expect(spy.calls.count()).toBe(1) Vue.delete(vm.b, 'e') }).then(() => { expect(spy.calls.count()).toBe(2) }).then(done) })
addChange(state, { type, payload }) { switch (type) { case 'add': case 'delete': Vue.set(state.changes, type, state.changes[type].concat([payload])) break case 'update': let hasChange = state.changes.update.hasOwnProperty(payload.id) let originalNote = (state.notebook.notes || []).find(n => n.id === payload.id) if (originalNote && originalNote.content === payload.content && hasChange) { Vue.delete(state.changes.update, payload.id) } else { Vue.set(state.changes.update, payload.id, payload) } break } }
it('warning set/delete on a Vue instance', done => { const vm = new Vue({ template: '<div>{{a}}</div>', data: { a: 1 } }).$mount() expect(vm.$el.outerHTML).toBe('<div>1</div>') Vue.set(vm, 'a', 2) waitForUpdate(() => { expect(vm.$el.outerHTML).toBe('<div>2</div>') expect('Avoid adding reactive properties to a Vue instance').not.toHaveBeenWarned() Vue.delete(vm, 'a') }).then(() => { expect('Avoid deleting properties on a Vue instance').toHaveBeenWarned() expect(vm.$el.outerHTML).toBe('<div>2</div>') Vue.set(vm, 'b', 123) expect('Avoid adding reactive properties to a Vue instance').toHaveBeenWarned() }).then(done) })
it('warning set/delete on Vue instance root $data', done => { const data = { a: 1 } const vm = new Vue({ template: '<div>{{a}}</div>', data }).$mount() expect(vm.$el.outerHTML).toBe('<div>1</div>') Vue.set(data, 'a', 2) waitForUpdate(() => { expect(vm.$el.outerHTML).toBe('<div>2</div>') expect('Avoid adding reactive properties to a Vue instance').not.toHaveBeenWarned() Vue.delete(data, 'a') }).then(() => { expect('Avoid deleting properties on a Vue instance').toHaveBeenWarned() expect(vm.$el.outerHTML).toBe('<div>2</div>') Vue.set(data, 'b', 123) expect('Avoid adding reactive properties to a Vue instance').toHaveBeenWarned() }).then(done) })
it('warning set/delete on a Vue instance', done => { const vm = new Vue({ template: '<div>{{a}}</div>', data: { a: 1 } }).$mount() expect(vm.$el.outerHTML).toBe('<div>1</div>') Vue.set(vm, 'a', 2) waitForUpdate(() => { expect(vm.$el.outerHTML).toBe('<div>2</div>') expect('Avoid adding reactive properties to a Vue instance').not.toHaveBeenWarned() Vue.delete(vm, 'a') }).then(() => { expect('Avoid deleting properties on a Vue instance').toHaveBeenWarned() expect(vm.$el.outerHTML).toBe('<div>2</div>') Vue.set(vm, 'b', 123) expect('Avoid adding reactive properties to a Vue instance').toHaveBeenWarned() }).then(done) })