Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
chaozwn opened this issue Jan 12, 2023 · 22 comments
Open
Labels
bug Something isn't working

Comments

@chaozwn
Copy link

chaozwn commented Jan 12, 2023

🐛 Bug description

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

🏞 Desired result

🚑 Other information

@chaozwn chaozwn added the bug Something isn't working label Jan 12, 2023
@funny-family
Copy link

@chaozwn, can you provide code of ShedulerDialog component?

@chaozwn
Copy link
Author

chaozwn commented Jan 19, 2023

@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
Copy link

@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
Copy link
Author

chaozwn commented Jan 19, 2023

@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
Copy link
Author

chaozwn commented Jan 19, 2023

@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
Copy link

@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
Copy link

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

@rcjiang
Copy link

rcjiang commented Jul 26, 2023

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

@sxzz
Copy link
Member

sxzz commented Jul 30, 2023

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
Copy link
Collaborator

zhiyuanzmj commented Sep 10, 2023

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
Copy link

lixiaofa commented Dec 6, 2023

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

@zhiyuanzmj
Copy link
Collaborator

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
Copy link

lixiaofa commented Dec 6, 2023

@vue-macros/volar

Thank you !

@lixiaofa
Copy link

lixiaofa commented Dec 7, 2023

<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)
image
There will be a warning

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

@zhiyuanzmj
Copy link
Collaborator

zhiyuanzmj commented Dec 7, 2023

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
Copy link

lixiaofa commented Dec 7, 2023

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
Copy link
Collaborator

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

@lixiaofa
Copy link

lixiaofa commented Dec 13, 2023

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
Copy link
Collaborator

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
Copy link

shortEmits

image

image

It doesn't seem to be effective
@zhiyuanzmj

@zhiyuanzmj
Copy link
Collaborator

zhiyuanzmj commented Dec 14, 2023

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

@lixiaofa
Copy link

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

Okay, thank you for your help

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

6 participants