Subscribe on changes!

Type '{ flexDirection: string; }' is not assignable to type 'StyleValue'

avatar
Oct 19th 2022

Vue version

3.2.4

Link to minimal reproduction

https://sfc.vuejs.org/#__DEV__eNp9j81OwzAQhF9l8cUgNTEUTlFaFYkDb8DFl5JsW0P8o7VTqCK/O5sGUFskTvbMrPfzDOIxhHLfo6hEHRsyIUHE1IeldsYGTwkGINxAhg15C5JHpXbaNd7FBDZuYTHm1/IZu87Di6euvZI32tVqWseLWCS0oVsnZAVQt2YPVUyHDhdaDK2JnB0qkJsOP+UMxuPJEDbJeMc2+Q+ZtTi+5de7u+UwHNE514rVjz8/8+cTSzGMb7X6/YKYialaYdehfIvecflhHNbfQdSigqMzelx51FrsUgqxUqp34X1bNt6qFWeKepeMxaL1dnVfzsuHW2bGdOqXGG3xyj0iEhO1mJ0sV2zukQpC1yIh/Qu7mD0DXmR/oCMza5dF/gKjw6sl

Steps to reproduce

Set style using attribute binding: :style="{ ... flexDirection: 'row' | 'column', ... }"

What is expected?

No error

What is actually happening?

Type '{ flexDirection: string; }' is not assignable to type 'StyleValue'

System Info

No response

Any additional comments?

No response

avatar
Oct 19th 2022
  • The Playground doesn't show Type information so it's not suited to reproduce the supposed issue.
  • The reproduction steps are not clear.
  • It's not clear when and by what the error is being raised - Volar in the IDE? running vue-tsc? Vue CLI?

Please provide a fully runnable reproduction demonstrating the problem.

as a hint: maybe all you need is as const?

<div :style="{display: 'flex', flexDirection: 'row'} as const">