Subscribe on changes!

custom component v-model type error when script use lang="tsx"

avatar
Jul 19th 2023

Vue version

3.3.4

Link to minimal reproduction

https://github.com/chenweiyi/vue-test-demo

Steps to reproduce

  1. download repo
  2. open this repo with vscode, I use vscode extensions volar.
  3. install deps: pnpm i
  4. open src/TsxComp.vue , then you can find ts error

What is expected?

TsxComp.vue not ts error

What is actually happening?

TsxComp.vue has ts error: 2322 :

不能将类型“{ "v-model": string; }” 分配给类型“IntrinsicAttributes & { readonly modelValue: string ...

image

System Info

System:
    OS: macOS 11.7.4
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Memory: 34.21 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.15.0/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
    pnpm: 8.3.1 - ~/.nvm/versions/node/v18.15.0/bin/pnpm
  Browsers:
    Chrome: 114.0.5735.198
    Safari: 14.1.2
  npmPackages:
    vue: ^3.3.4 => 3.3.4

Any additional comments?

I don't know this is vue/core error or vs code volar error, but it's here.

By the way, when I create a new test component TestTsxComp.vue (use tsx), it works fine.

avatar
Jul 19th 2023
'update:modelValue': (value: string) => typeof value === 'string',
avatar
Jul 19th 2023
'update:modelValue': (value: string) => typeof value === 'string',

Yeah, this code solve the warning. But I actualy want to solve another question. I have added a picture to the question, please take a look and help me again.