[BUG] v-model when props has attr `required: true`, typescript report errors.

[chaozwn]

🐛 Bug description

v-model when props has attr required: true, typescript report errors. link: #151

🏞 Desired result

🚑 Other information

[funny-family]

@chaozwn, can you provide code of ShedulerDialog component?

[chaozwn]

@chaozwn, can you provide code of ShedulerDialog component?

import { CellGroup, Dialog, Field, Switch } from "vant"; import { defineComponent, ref, toRaw, toRef, toRefs } from "vue"; import type { PropType } from "vue"; import type { ShowDialogType, Task } from "@/views/Home/hook";

const SchedulerDialog = defineComponent({ props: { show: { type: Boolean, default: false, }, showDialog: { type: Object as PropType, required: true, }, task: { type: Object as PropType, required: true, }, }, emits: ["onUpdate:show", "onUpdate:task"], setup(props, { emit }) { const { showDialog, task } = toRefs(props); const handleOnConfirm = () => { console.log(task.value); emit("onUpdate:task", task.value); }; return () => (

{{ input: () => ( ), }}

);

}, });

export default SchedulerDialog;

[funny-family]

@chaozwn

1. props related to v-model should be required: false (I see no reason to make it required: true)
2. try this <SchedulerDialog v-model={[yourValue, 'task']} />

[chaozwn]

@chaozwn

1. props related to v-model should be required: false (I see no reason to make it required: true)
2. try this <SchedulerDialog v-model={[yourValue, 'task']} />

but it works in vue template. i think it should not be throw a TSLint problem right?

[chaozwn]

@chaozwn

1. props related to v-model should be required: false (I see no reason to make it required: true)
2. try this <SchedulerDialog v-model={[yourValue, 'task']} />

in typescript,when props has required: true, ts can not check v-model:task, i found that be seen as a whole attr.

[funny-family]

@chaozwn

1. props related to v-model should be required: false (I see no reason to make it required: true)
2. try this <SchedulerDialog v-model={[yourValue, 'task']} />

but it works in vue template. i think it should not be throw a TSLint problem right?

TSLint? As far as I know it is depricated. So, vue templates work very bad with ts.

[funny-family]

You can check here an example of component with v-model

[rcjiang]

This problem should be solved, instead of avoiding it using methods such as required: false

[sxzz]

v-model:foo is a syntax sugar from Vue, and it's not supported by TS. The only way we can provide now is to use foo={something} onUpdate:foo={handler}

[zhiyuanzmj]

I created a PR https://github.com/vue-macros/vue-macros/pull/494 to resolved it.

// tsconfig.json
{
  "vueCompilerOptions": {
    "target": 3,
    "plugins": [
      "@vue-macros/volar/jsx-directive"
      // ...more feature
    ]
  }
}

[lixiaofa]

I also face the same problem, how should I solve it @chaozwn @sxzz @funny-family @zhiyuanzmj @rcjiang

[zhiyuanzmj]

I also face the same problem, how should I solve it @chaozwn @sxzz @funny-family @zhiyuanzmj @rcjiang

https://vue-macros.dev/guide/bundler-integration.html

You can install @vue-macros/volar plugin to resolve it

pnpm add @vue-macros/volar

Usage

// tsconfig.json
{
  "vueCompilerOptions": {
    "plugins": [
      // ...
      "@vue-macros/volar/jsx-directive"
    ]
  }
}

[lixiaofa]

@vue-macros/volar

Thank you ！

[lixiaofa]

<script setup lang="tsx"> <FsInputCell v-model={[rowData, 'rowData']} column={column} /> </script> export type InputCellProps = { rowData: any column: Column } export type InputCellEmits = { 'onUpdate:rowData': [rowData: any] }

emit('onUpdate:rowData', updataRowData) There will be a warning

@sxzz @rcjiang @zhiyuanzmj @chaozwn @funny-family

[zhiyuanzmj]

You can use defineEmits or defineModel in the component.

// without 'on' prefix 
defineEmits([ 'update:rowData'])
// Or
defineModel('rowData')

If the issue still unresolved, please provide a minimal repository. By the way, you don't need to @ everyone, we can also see your message.

[lixiaofa]

You can use defineEmits or defineModel in the component.

// without 'on' prefix 
defineEmits([ 'update:rowData'])
// Or
defineModel('rowData')

If the issue still unresolved, please provide a minimal repository. By the way, you don't need to @ everyone, we can also see your message.

const emit = defineEmits<{ 'update:rowData': [rowData: any] }>() Why type declaration doesn't work？

[zhiyuanzmj]

Type declaration should also be possible, if not, please provide a minimal repository.

[lixiaofa]

Type declaration

@zhiyuanzmj see https://github.com/lixiaofa/test636/blob/main/vite.config.ts

step： 1.click the cell, then input cell 2.Click anywhere

[zhiyuanzmj]

Thank's for your repository, It seems to be caused by vue-macros, I'll fix it later. You can setting shortEmit: true temporarily fixes it.

 VueMacros({
      shortEmits: true,
      plugins: {
        vue: vue(),
        vueJsx: vueJsx() // 如果需要
      }
  }),

[lixiaofa]

shortEmits

It doesn't seem to be effective @zhiyuanzmj

[zhiyuanzmj]

Sorry, It's be caused by 'betterDefine', waiting for merge https://github.com/vue-macros/vue-macros/pull/582.

[lixiaofa]

Sorry, It's be caused by 'betterDefine', waiting for merge vue-macros/vue-macros#582.

Okay, thank you for your help