App breaks when using both HTML style and inline style.

[vuphuctho]

Version

3.2.2

Reproduction link

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8aDEgc3R5bGU9XCJmb250LXNpemU6IDM0cHhcIiA6c3R5bGU9XCJ7ICdmb250LXdlaWdodCc6ICdib2xkJ31cIj5IZWxsbyBXb3JsZDwvaDE+XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0IHNldHVwPlxuY29uc3QgbXNnID0gJ0hlbGxvIFdvcmxkISdcbjwvc2NyaXB0PiJ9

Steps to reproduce

Using both style and :style breaks the app.

Minimal code to reproduce:

<h1 style="font-size: 34px" :style="{ 'font-weight': 'bold'}">Hello World</h1>

What is expected?

Both styles should be applied together

What is actually happening?

App crashes.

In Firefox following error message is seen:

Uncaught TypeError: CSS2Properties doesn't have an indexed property setter for '0'

In Chrome:

Uncaught TypeError: Failed to set an indexed property on 'CSSStyleDeclaration': Indexed property setter is not supported.

---

I don't know the exact version this issue start to happen, but same code works with vue 2.6.14. The same code works for me in Vue 3, until I update the package today.

[edison1105]

as a workaround use v-bind instead, see sfc

[yyx990803]

Note this only happens if both style and :style are used AND the value of :style is a constant (not referring any component state). Quite an edge case here...