Should have valid .sync modifier on v-bind directives JS-0665

In some cases, we may need “two-way data binding” for a prop. Unfortunately, true two-way binding can create maintenance issues, because child components can mutate the parent without the source of that mutation being obvious in both the parent and the child.

For convenience, VueJS offers a shorthand for below pattern with the .sync modifier

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

Shorthand:

<text-document v-bind:title.sync="doc.title"></text-document>

.sync modifier on v-bind directives is not valid in the following cases:

• The .sync modifier does not have the attribute value which is valid as LHS.
• The .sync modifier has potential null object property access.
• The .sync modifier is on non Vue-components.
• The .sync modifier's reference is iteration variables

Bad Practice

  <MyComponent v-bind:aaa.sync="foo + bar" />
  <MyComponent :aaa.sync="foo + bar" />

  <MyComponent :aaa.sync="a?.b.c" />
  <MyComponent :aaa.sync="(a?.b).c" />

  <input v-bind:aaa.sync="foo">
  <input :aaa.sync="foo">

  <div v-for="todo in todos">
    <MyComponent v-bind:aaa.sync="todo" />
    <MyComponent :aaa.sync="todo" />
  </div>

Recommended

  <MyComponent v-bind:aaa.sync="foo"/>
  <MyComponent :aaa.sync="foo"/>

  <div v-for="todo in todos">
    <MyComponent v-bind:aaa.sync="todo.name"/>
    <MyComponent :aaa.sync="todo.name"/>
  </div>