Subscribe on changes!

v-bind DOM property and attribute inconsistent binding

avatar
Sep 16th 2021

Version

3.2.11

Reproduction link

sfc

Steps to reproduce

 <div .domProp=a ^domAttr=b>
  </div>
return (_ctx, _cache) => {
  return (_openBlock(), _createElementBlock("div", {
    ".domProp": _unref(a),
    "^domAttr": "b"
  }, null, 8 /* PROPS */, _hoisted_1))
}
}

a dom property or attribute can binded using the shorthand syntax. for property .domProp for attribute ^domAttr

when using the property shorthand the expression is bounded when using the attribute shorthand the expression is not bounded

What is expected?

both property and attribute shorthand should be consistent.

either both are bounded or both are not bounded.

What is actually happening?

only a dom property is bounded


notes: hypothetically if both shorthand for property and attributes are not bounded by default

^domAttr="hello"
.domProp="hola"

then when binding is needed, the following syntax can be used
note that currently this syntax only actually works for the dom attribute :^. :. for the dom property will be completely ignored )

:^domAttribute=helloVar
:.domProperty=holaVar

its also possible that we want to keep this behavior as is, but I am not sure if this was intentional. and if it is, perhaps this should just be documented.

avatar
Sep 17th 2021

^ is not a documented shorthand.

The only supported shorthands for v-bind are : and ..

^ is only supported as a prefix when using manual render functions because there are no modifiers when using render functions.