You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
it('should append a new property to an object when the new property is referenced by a template',()=>{constTestComponent={data: ()=>({anObject: {propA: 'a',propB: 'b'}}),computed: {anObjectKeys(){returnObject.keys(this.anObject).join(',')}},template: `<div>{{ anObjectKeys }}</div>`}constwrapper=mountingMethod(TestComponent)wrapper.setData({anObject: {propC: 'c'}})expect(wrapper.vm.anObject.propA).to.equal('a')expect(wrapper.vm.anObject.propB).to.equal('b')expect(wrapper.vm.anObject.propC).to.equal('c')expect(wrapper.vm.anObjectKeys).to.equal('propA,propB,propC')expect(wrapper.html()).to.equal('<div>propA,propB,propC</div>')})
I think it's because it's not setting nested object properties through Vue.set(); and hence not setting up new watchers for new properties on these objects.. which, as long as they're not root objects, vue supports.
Changing wrapper.setData(data) impl to the below works..
Vue does not allow dynamically adding new root-level reactive properties to an already created instance. However, it’s possible to add reactive properties to a nested object using the Vue.set(object, key, value)
/** * Sets vm data */setData(data: Object){if(this.isFunctionalComponent){throwError(`wrapper.setData() cannot be called on a functional `+`component`)}if(!this.vm){throwError(`wrapper.setData() can only be called on a Vue `+`instance`)}letsetDataRecursive=function(target,key,val){if(typeofval==='object'&&val!==null&&!Array.isArray(val)){Object.keys(val).forEach(valKey=>{setDataRecursive(target[key],valKey,val[valKey])})}else{Vue.set(target,key,val)}}Object.keys(data).forEach(key=>{setDataRecursive(this.vm,key,data[key])})}
All tests pass...
Not a JS dev, so idk if this is sensible, also have little exposure to vue..
HTH. 😄
I guess for correctness you should:
foreach (key, val in data) {
if (val is object)
{
if (key in this.vm.$data) {
// recurse
}
} else {
// set value/array
}
}
i.e. only setting properties of the hierarchy of objects that are defined... that is, only appending new properties.. not appending new objects.. if that makes sense? Although this is probably making too many assumptions
Version
1.0.0-beta.20
Reproduction link
#798
Steps to reproduce
Add this to
test/specs/wrapper/setData.spec.js
What is expected?
expect(wrapper.vm.anObjectKeys).to.equal('propA,propB,propC')
What is actually happening?
The computed property is not being updated, when
setData()
is being called.If you remove the reference to
anObjectKeys
from the template, it works fine - besides the last assertion, obviously.Also fails in dev @ 1ee03ac
See also, #565
The text was updated successfully, but these errors were encountered: