[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 () => (

<Dialog
title={"Detail"}
v-model:show={props.showDialog.show}
onConfirm={handleOnConfirm}
>

<Field
v-model={task.value.content}
name={"content"}
label={"内容"}
rules={[{ required: true, message: "内容不能为空" }]}
/>
<Field
v-model={task.value.createTime}
name={"createTime"}
label={"创建时间"}
disabled
/>
<Field name={"status"} label={"状态"} disabled>
{{
input: () => (
<Switch v-model={task.value.status} size={"20px"} />
),
}}

);
},
});

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 vue-macros/vue-macros#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 vue-macros/vue-macros#582.

[lixiaofa]

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

Okay, thank you for your help

[jarofbilly]

Are there any workarounds for this not tied to Vue Macros? We use VS2022 instead of VSCode so cannot use it.