Vue: Vue.set to behave like _.set

[kicco]

Suggestion for Vue.set

In my opinion it could be helpful to have vm.$set(object, 'dot.separated.path', value) to behave like lodash _.set does.

Currently I am forced to do this in order to set a dot.separated.path

     let copy = _.cloneDeep(this.collection)
    _.set(copy, data.pointer, data.value)
    this.collection = Object.assign({}, copy)

data.pointer looking like config.header.meta.

Maybe I am missing something but what currently happens to me looks like this:
config.deployment.publish_from:"This"

Taking the chance to say this is the best web-thing I've ever worked with I really thank you a lot. Keep up the good work!

[simplesmiler]

You can do Vue.set(object.dot.separated, 'path', value) (assuming object.dot.separated already exists).

[kicco]

Yup, I am aware of that :)

[LinusBorg]

hen it might be a good idea to explain why that does not solve your problem?

Also, we generally try not to integrate to many helper methods, especially none that other tools like lodash have alread solved far better. so if you need string key paths, maybe do this:

this.$set(_.get( this.config, 'header.meta'), 'publish_from', "This")

[kicco]

In my particular instance I am $emit-ting values from recursive sub components.

In this case I am dealing with (recursively) nested forms, so from the root component I only have access to a 'root' pointer. Sub-components are then bubbling up values, carrying their 'path' (and value) along the way, so the path can look like I mentioned.

In the root Form component I have something like form.collection. Nested sub-components may then end up looking like config.style.background, so i would need to set that path to the root data structure (which may not exist).

Again, it's not life threatening, just thought it would be useful. I understand the "keeping it light" philosophy but I keep running into this.

I hope this makes more sense now, thanks for your time.

[yyx990803]

Vue.set used to support arbitrary paths, but I decided to remove it because it makes it too easy for users to dynamically modify the structure of their state. In general, we want to encourage users to design the shape of their state upfront and work with predictable state structures, which is why Vue.set only supports single-level key.

If the path already exists, you can do what @LinusBorg suggested - it's a bit more verbose, but imo acceptable once wrapped in a helper function.