Vue-test-utils: setData doesn't play friendly with nested data properties

[josephstein]

If you have a nested data format:

data: {
  fields: {
    name: 'foo',
    notes: 'bar'
  }
}

One would think you can update a property by doing the following (similar to the way you watch a nested property):
wrapper.setData('fields.name': foo2)

And if you do the following:

wrapper.setData({
  fields: {
      notes: 'foo2'
    }
})

it obviously eliminates the other keys (fields.notes) in this example.

Unless I'm missing something it seems that we'd need to implement the dot syntax demonstrated above (my personal preference) or expose a getData property so we can edit the single key/value pair of interest.

[wtho]

Just one note:
Property keys can be strings, that can contain dots, so the proposed syntax would not be appropriate. E. g. this is a valid object:

const field = {
  notes: [ ],
  'name.first': { }
}

So an array of strings as the keys would be a better approach in my opinion.

But then I'm not sure, if we need this direct access to subfields. I think this will always work and gives sufficient control (correct me if I'm wrong):

wrapper.setData({
  fields: {
    ...wrapper.vm.fields,
    notes: 'foo2'
  }
})

[vouill]

100% agree with @wtho .

[eddyerburgh]

I'm going to close this in favor of @wtho's solution

[josephstein]

I understand. I just felt it was more in paradigm with Vue's style of watching properties that allows using a period to access sub-properties (see below). Although I admit I thought it was a bit odd for the same reasons @wtho points out.

watch: {
    'notes.first': function(newValue) {
      ...
    }
  }

With that said I initially assumed (keyword being assume) that I would be able to use setData is a similar fashion.

I'll just stick with what @wtho suggested.