Sync Modifier support object properties

[altjz]

What problem does this feature solve?

Sync Modifier support object properties.
For example, I have a myObj object, it has a foo and a bar property.

myObj: {
  foo: 'foo',
  bar: 'bar'
}

This feature could use update:myObj.foo and update:myObj.bar to update the value.

this.$emit('update:myObj.foo', 'new-foo');
this.$emit('update:myObj.bar', 'new-bar');

What does the proposed API look like?

Currently, I need to use below format

<MyComponent :foo.sync="myObj.foo" :bar.sync="myObj.bar"></MyComponent>

props: ['foo', 'bar']
...
this.$emit('update:foo', 'new-foo');
this.$emit('update:bar', 'new-bar');

But with this new feature:

<MyComponent :myObj.sync="myObj"></MyComponent>

props: ['myObj']
...
this.$emit('update:myObj.foo', 'new-foo');
this.$emit('update:myObj.bar', 'new-bar');

It becomes more simple and clear, especially when the object has many properties.

[javoski]

You can use v-bind without directive arguments:

<MyComponent v-bind="myObj"></MyComponent>
...
props: ['foo', 'bar']
...

[altjz]

@javoski it seems more clear than before. So I can use like below code, right?

this.$emit('update:foo', 'new-foo');
this.$emit('update:bar', 'new-bar');

but why not just myObj.foo? Especially the object has many properties.

[yyx990803]

Although I can see the point of this proposal, I don't feel that it's particularly needed. In some way it encourages passing multiple values in an object to avoid having to specify multiple props. It is very easy to abuse object props by tucking more and more properties into it, making it some sort of "super prop". However, I think having an explicit list of props makes your component's interface easier to understand.

[jackchoumine]

You can use v-bind without directive arguments:

<MyComponent v-bind="myObj"></MyComponent>
...
props: ['foo', 'bar']
...

using sync with an object work well.

<child :my-obj.sync = "myObj"/>

myObj take more than two key.
inner child

this.$emit("update:myObj",newObj)

who is more harder to understand? who is better? why?

[taha-mv]

You can use v-bind without directive arguments:

<MyComponent v-bind="myObj"></MyComponent>
...
props: ['foo', 'bar']
...

using sync with an object work well.

<child :my-obj.sync = "myObj"/>

myObj take more than two key.
inner child

this.$emit("update:myObj",newObj)

who is more harder to understand? who is better? why?

THis is great! works like a charm!