Question 306867 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – v-slot is not compatible with nuxt version 3

Before, I coded nuxt beta + used vuetify’s UI.
This is my custom text-field component

<script setup lang="ts">
</script>

<template>
   <v-text-field class="text-field" v-bind="$attrs" variant="solo">
     <template v-for="(_, name) in $slots" #[name]="slotData">
       <slot :name="name" v-bind="slotData" />
     </template>
   </v-text-field>
</template>

But after I updated the nuxt version to the official nuxt 3 version, it got an error

Element implicitly has an 'any' type because expression of type 'string | number' can't be used to index type 'Readonly<{ message?: ((arg: VMessageSlot) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[]) | undefined; clear?: (() => VNode<...>[]) | undefined; ... 8 more ...; counter?: ((arg: VCounterSlot) => VNode<...>[]) | undefined; }>'.
   No index signature with a parameter of type 'string' was found on type 'Readonly<{ message?: ((arg: VMessageSlot) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[]) | undefined; clear?: (() => VNode<...>[]) | undefined; ... 8 more ...; counter?: ((arg: VCounterSlot) => VNode<...>[]) | undefined; }>'.ts(7053)

in #[name]

Can anyone help me fix this error? Thank you.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    @Sahand Asrzad Actually, I followed the key in v-for but in #[name] I still got an error related to not being able to determine the type.

    Element implicitly has an 'any' type because expression of type 'string | number' can't be used to index type 'Readonly<{ message?: ((arg: VMessageSlot) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[]) | undefined; clear?: (() => VNode<...>[]) | undefined; ... 8 more ...; counter?: ((arg: VCounterSlot) => VNode<...>[]) | undefined; }>'.
   No index signature with a parameter of type 'string' was found on type 'Readonly<{ message?: ((arg: VMessageSlot) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[]) | undefined; clear?: (() => VNode<...>[]) | undefined; ... 8 more ...; counter?: ((arg: VCounterSlot) => VNode<...>[]) | undefined; }>'.ts(7053)

  2. 0

    It looks like you are using Vue 3 with the Composition API and TypeScript, and the error is related to the type definition for the $slots object. The error is indicating that TypeScript cannot determine the correct type for the keys of $slots when you are using it in the v-for loop.

    To resolve this issue, you can provide a type assertion for the keys of $slots to let TypeScript know that they are of type string or number. Here’s how you can do it:

    <script setup lang="ts">
// Import the appropriate types from Vue
import { VNode, RendererNode, RendererElement, VMessageSlot, VCounterSlot } 
from 'vue';

</script>

<template>
 <v-text-field class="text-field" v-bind="$attrs" variant="solo">
  <template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
    <slot :name="name" v-bind="slotData" />
  </template>
 </v-text-field>
</template>

    In this example, I imported the necessary types from Vue and used the :key="name" binding in the v-for loop to help TypeScript infer the correct type for the name variable. This should resolve the issue you’re facing. Make sure to adjust the import statement based on the actual structure of your Vue setup.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search