Properties with "."

[Scott Smith]

I am trying to see how well I can work with an existing model, which currently has some properties with "." in the property key. For example:

{
  "propertygroup.a": "value-a",
  "propertygroup.b": "value-b"
}

Is there a way I can work with this? Currently the library (probably correctly so) assumes that my object is actually this:

{
  "propertygroup": {
    "a": "value-a",
    "b": "value-b"
  }
}

[Branden Horiuchi]

Yes please see the toPath docs for lodash but tldr you can do model[“[‘propertygroup.a’]”]

[Scott Smith]

Thanks for the response.

I should clarify that in my real scenario, the values of the two properties above are actually empty string. I am following your example of setting up a computed property "model" like this:

data () {
  return {
    subjectModel: {
      "propertygroup.a": "",
      "propertygroup.b": ""
    }
  }
},
computed: {
  model () {
    return this.$deepModel(this.subjectModel);
  }
}

When I output "model" in my template, it appears to just be setting model.propertygroup equal to an empty object. Is that the expected behavior? Let me know if this is clear. If not, tomorrow I can setup a complete example.

[Reyner Herrpinark Lugo]

Hi @scottadamsmith , can you fix your example or provide a fiddle in order to test this?

[Scott Smith]

I will setup an example.

[Reyner Herrpinark Lugo]

Hi all, maybe this example can help as an start point here:

https://codesandbox.io/s/rmx0051794

Feel free to edit and share.

[Scott Smith]

@ReynerHL Thanks for the help. For some reason I could not get the template to update real time with v-model bindings in your example, so I created another one that closely emulates what I have in my app.

https://codesandbox.io/s/ppr6v6ny7x

I actually have it semi-working now, but there are a couple of strange behaviors remaining:

• "propertyGroup" is getting added to subjectModel
• "propertyGroup" is present in model and both "propertyGroup.a" and "propertyGroup.b" are not
• When entering values into the inputs that are bound to "propertyGroup.a" and "propertyGroup.b", only the subjectModel seems to update (the model never reflects the change)

[Branden Horiuchi]

I haven’t looked at the code yet but from this thread I think I know what is going on and it will most likely require a modification to the getpaths function to look for paths with dots and represent them as the appropriate string path. I’ll try to look at this tomorrow

[Branden Horiuchi]

there were several underlying issues that were preventing this which prompted me to rework how the proxies are used which over all reduced the code base and made things much cleaner. You should now be able to do this with the latest release v0.6.0 and there is an example for this issue in the tests folder. Please close this ticket upon successful testing. Or open any new bugs you find.

[Reyner Herrpinark Lugo]

Hi all, I've been playing with @scottadamsmith example, and the new property notation case still having some strange behaviour. Take a look at https://codesandbox.io/s/5zx1481orn .

By the way, I think that @bhoriuchi made a previous update and now we can use this:

v-model="model['propertygroup.b']"

instead of

v-model="model["propertygroup.b"]"

When we use "dotted notation" at the moment we define the subjectModel's properties, v-model binding in an input do not work well, is like if the value were read again from its initial value and reasigned.

All the other notation are working well. Hope this can help in this point.

[Reyner Herrpinark Lugo]

I also noticed that if we use this

<input type="text" v-model="subjectModel.propertygroup.b" />

The behaviour is the same, so maybe it is not a vue-deepset related issue.

[Scott Smith]

Using this notation seems to work:

v-model="model["['propertygroup.b']"]"

But when using v-model="model['propertygroup.b']" there is definitely some strange behavior where it seems that the binding to model keeps resetting the value.

[Branden Horiuchi]

I have a fix for this, but after thinking about it you should actually be using

model["['propertygroup.b']"]

as this is a proper lodash path string for accessing that path. Allowing it to be looked up with model['propertygroup.b'] creates an issue when you have data that looks like

const data = {
  'propertygroup.b': 'value-b',
  propertygroup: {
    b: 'nested-value-b'
  }
}

in that event model['propertygroup.b'] would always reference the data at value-b

Also, this isn't formally documented but will be on the next patch release but you can use arrays for your path values so you can do

model[['propertygroup.b']] and model[['propertygroup']['b']] to reference different paths.

TLDR;

I will be removing the ability to do model['propertygroup.b'] to reference the key 'propertygroup.b' and you will instead need to use either an array or the proper lodash formatted string model['["propertygroup.b"]']

[Branden Horiuchi]

see v0.6.1

[Branden Horiuchi]

resolved in v0.6.1