Closed Shinigami92 closed 3 years ago
Surprisingly I found a workaround :eyes:
I added following to my shims-vue.d.ts
declare module '@vue/runtime-dom' {
type ReservedProps = {
key?: string | number | symbol;
};
}
Volar shows the error anyways
But that's okay, at least I can successfully build the project :slightly_smiling_face:
Thanks for the suggestion. But vue-tsc only report the TS problems, template problems report by vue compiler (vue-cli / vite) not by vue-tsc, so you can just ignore it.
Vue 2 template check may be supported by Plugin API.
@johnsoncodehk I have now also some parts like this:
Is there an option to just say e.g. //- @ts-expect-error
? Or just to disable ts-type for only template
for now?
You can use @ts-ignore
in expression like this:
v-if="
// @ts-ignore
synonym.entity
"
And the problem is if you use v-if
and v-for
on single node, in vue 3 it's if > for
, in vue 2 it's for > if
.
You can define v-if
on a single template
node on vue 2 project to avoid this problem.
v-chip(v-for="synonym in item.synonyms", ...)
template(v-if="synonym.entity")
- ...
Note: vetur's eslint also report that don't use v-if
and v-for
on single node.
I know the breaking change. But using v-chip(v-for)
> template(v-if)
was not an option here, due to I don't want empty chips rendered.
I needed a function to pre-filter the array/object.
Is this better for you?
template(v-for="synonym in item.synonyms")
v-chip(v-if="synonym.entity", ...)
- ...
Sadly not, cause this would just move the error to the :key
template(v-for="synonym in item.synonyms")
v-chip(v-if="synonym.entity", :key="synonym.id" ...)
~~~~~~~~~~~~~~~~~ <template v-for> key should be placed on the <template> tag. vue(32)
- ...
Letting me asked again to tell the compiler somehow to just ignore it, cause I know I'm using Vue 2 :sweat_smile:
And moving the :key
up to template
would result in rendering issues / runtime warnings in the browser console
A good news is Vue 3.1 template compiler is available to Vue 2!
https://blog.ninja-squad.com/2021/06/07/what-is-new-vue-3.1/
Please track https://github.com/johnsoncodehk/volar/issues/346
Now that we have compat mode 2, could we add the symbol
typedef automatically?
Currently I'm applying this patch via patch-package to suppress build errors.
diff --git a/node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts b/node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts
index f183ace..2d3b617 100644
--- a/node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts
+++ b/node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts
@@ -1398,7 +1398,8 @@ type EventHandlers<E> = {
import * as RuntimeCore from '@vue/runtime-core'
type ReservedProps = {
- key?: string | number
+ // https://github.com/johnsoncodehk/vue-tsc/issues/35#issue-901304468
+ key?: string | number | symbol
ref?:
| string
| RuntimeCore.Ref
It seem 3.2.0-beta.8 already fixed it.
I want to use vue-tsc with currently a Vue 2 project due to I'm stuck on Vuetify
But sadly I get errors like
<template v-for> key should be placed on the <template> tag. vue(32)
https://v3.vuejs.org/guide/migration/key-attribute.html#overview
This is correct for Vue 3, but not for Vue 2. Is it possible somehow to use a
--vue=2
mode to prevent/suppress such errors?De we need to report that to
Volar
instead ofvue-tsc
?