Level 51
Why you're not defining the id inside defineProps?
Mar 5, 2023
6
Level 9
Vue 3 $attrs in template and typescript
I'm building a fresh app with vue3 and Typescript.
I wanted to create a production build but I receive a lot of errors according the fallthrough attributes.
<template>
<div>
<div class="relative mt-1 rounded-md">
<textarea :id="$attrs.id" class="form-textarea w-full focus:border-slate-300" rows="4"
:name="$attrs.name"
:value="modelValue"
@input="updateValue">
</textarea>
</div>
</div>
</template>
<script lang="ts">
export default {
inheritAttrs: false
};
</script>
<script setup lang="ts">
defineProps({
modelValue: {
type: String
},
icon: {
required: false,
type: String
},
label: {
required: false,
type: String
},
readonly: {
required: false,
type: Boolean,
default() {
return false;
}
}
});
const emit = defineEmits(['update:modelValue']);
const updateValue = (e: Event) => {
emit('update:modelValue', (e.target as HTMLInputElement).value);
};
</script>
For example i get
vite v4.1.1 building for production...
transforming (146) node_modules/axios/lib/helpers/buildURL.jsresources/tenant/app/js/components/textarea/VTextarea.vue:5:23 - error TS2322: Type 'unknown' is not assignable to type 'string | undefined'.
5 <textarea :id="$attrs.id" class="form-textarea w-full focus:border-slate-300" rows="4"
~~~
node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:425:3
425 id?: string
~~
The expected type comes from property 'id' which is declared here on type 'ElementAttrs<TextareaHTMLAttributes>'
resources/tenant/app/js/components/textarea/VTextarea.vue:6:23 - error TS2322: Type 'unknown' is not assignable to type 'string | undefined'.
6 :name="$attrs.name"
How can I use $attrs in the template part with typescript? I'm kinda familiar with TypeScript, but I don't know how to solve this.
Level 9
@MohamedTammam I don't want to define each item that might occur in the future. Also there is the option of fallthrough so why not using it?
Level 21
You have to define the 'Type' (string or undefined) of the id and name in your parent component, they are both currently unknown.
Level 9
@pom how do you do that for all fallthrough attributes?
Level 21
const myName: string = 'Hello';
const myId: string = 'textarea-1';
<TextAreaComponent :id="myId" :name="myName" />
Level 1
I did it this way
<script setup lang="ts">
const attrs = useAttrs() as {class:string}
</script>
1 like
Please or to participate in this conversation.