question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

v-slot with { } accept slot data has type any error in typescript project when update to 0.27.2

See original GitHub issue

Info

  • Platform: macOS
  • Vetur version: 0.27.2
  • VS Code version: 1.48.2

Problem

when update to 0.27.2 use v-slot with { } to accept data has this error tip,but I don‘t know how to definition this type and when use 0.27.1 version has no this error tip

图片

Reproducible Case

// mc-ossfile-view.vue
<template>
  <div class="mc-ossfile-view">
    <div class="mc-ossfile-view__file-item"
      v-for="(item, idx) in fileList" :key="idx">
      <slot :item="item" :idx="idx"></slot>
      <div class="info-button"></div>
      <slot name="after" :item="item" :idx="idx"></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component
export default class McOssfileView extends Vue {
  @Prop({ type: Array, default: () => [] }) readonly fileList!: mcLib.TDataObject[]
}
</script>
// use vue file
<mcOssfileView
  :fileList="fileList">
  <template v-slot="{item}">{{item.name}}</template>
  <template v-slot:after="{item}">
    <div class="info-bar">
      <div class="text">{{item.name}}</div>
    </div>
  </template>
</mcOssfileView>

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:10
  • Comments:10 (4 by maintainers)

github_iconTop GitHub Comments

10reactions
sebastian0x62commented, Mar 29, 2021

@yoyo930021 I see there is work in progress regarding this issue. I’m using Vuetify and have the slot type issue with its virtual scroller. Is there any workaround to manually type hint the correct slot type from “any”? I didn’t find a way for that. Wondering if it’s currently even possible (just manual hinting).

7reactions
JW9506commented, Sep 25, 2020

It’s a lot of work. It will take a lot of time.

If you know ahead of time something takes a lot of work, then you just implied you know the direction towards the end goal, just think about how to achieve it while your Typescript skill gets better.

Read more comments on GitHub >

github_iconTop Results From Across the Web

vue.js - Vue3 + Vite + Typescript: Scoped slots type error
This is the first Vue3/Typescript 'any' error I've run up against without a stackoverflow solution, would hate to have to change the strictness ......
Read more >
Slots - Vue.js
Slot Content and Outlet #. We have learned that components can accept props, which can be JavaScript values of any type. But how...
Read more >
@volar/typescript-faster | Yarn - Package Manager
TypeScript Language Service Completion API is slow when calculate auto-import. This package make it faster by ported tsserver auto-import caching logic.
Read more >
Vue.js: support type inference for v-slot scope variable
We should provide type inference for scope variable. For example, if slot element has a following binding: <slot name="scopedSlot" :foo="bar">.
Read more >
vuejs/vetur (Raised $789.00) - Issuehunt
v-slot with { } accept slot data has type any error in typescript project when update to 0.27.2. Unfunded#2258created byEurkidu.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found