Nuxt•2mo ago

v-for doesnt infer type from computed

Hey, not sure if I'm doing anything wrong here. But I have this piece of code:

const selectedProducts = computed<StorefrontProduct[]>(() => {
    return products.value.filter(p => {
        if (!p.tags) return false;
        return p.tags.some(t => t.name.toLowerCase() === category);
    });
});

const selectedProducts = computed<StorefrontProduct[]>(() => {
    return products.value.filter(p => {
        if (!p.tags) return false;
        return p.tags.some(t => t.name.toLowerCase() === category);
    });
});

Using it in this v-for:

                    <div v-for="product in selectedProducts" :key="product.id">
                        {{ product.name }}
                    </div>

                    <div v-for="product in selectedProducts" :key="product.id">
                        {{ product.name }}
                    </div>

But product still gives me the 'any' type. why is this?

9 Replies

kapa.ai•2mo ago

Hi @ᴋʏʟʟɪᴀɴ. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The behavior you're seeing is due to how Vue and Nuxt handle type inference in templates. Even though you've typed your computed property as StorefrontProduct[], the template context in Vue (and thus in Nuxt) does not automatically infer or expose those types to the template's v-for variable (product). As a result, product is typed as any in the template. This is a known limitation: TypeScript type information is not propagated into the template scope for variables introduced by v-for. This is not specific to Nuxt, but rather a limitation of Vue's template type inference. If you want better type inference in your IDE, you can use <script setup lang="ts"> and work with your data in the script section, where TypeScript will respect your types. But in the template, v-for variables will still be any unless you use a tool or plugin that enhances template type inference. The knowledge sources do not mention a built-in Nuxt or Vue solution to this limitation, so this is expected behavior in current versions of Nuxt 3 and Vue 3. You can read more about TypeScript support and its limitations in Nuxt here: Vue with Nuxt - TypeScript Support and TypeScript in Nuxt. In summary:
- This is a limitation of Vue's template type inference, not your code. - TypeScript types are respected in the script section, but not in the template's v-for variable. - There is no Nuxt-specific workaround documented in the official docs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@166602211780984832> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

ᴋʏʟʟɪᴀɴOP•2mo ago

bruh @kapa.ai are there no alternatives to this structure?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the provided knowledge sources, there is no documented alternative structure in Nuxt or Vue that allows template v-for variables to automatically infer types from computed properties in the template section. The official documentation acknowledges TypeScript support in Nuxt and describes how types are respected in the script section, but does not mention a way to improve type inference for v-for variables in templates or provide an alternative structure to achieve this behavior Vue with Nuxt - TypeScript Support TypeScript in Nuxt. If you need strong type inference, the recommended approach is to handle your logic in the <script setup lang="ts"> section, where TypeScript types are fully respected. There is no official Nuxt or Vue feature documented in the sources that changes this limitation in the template section. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@166602211780984832> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

ᴋʏʟʟɪᴀɴOP•2mo ago

thats so foolish bro

dwol•2mo ago

This should be working. When you hover your const selectedProducts does it show the type correctly? Try running npx nuxt prepare and then restart the TS server. Also maybe try hardcoding selectedProducts to see if it's something to do with the computed.

const selectedProducts = [{ id: 1, name: 'test' }]

const selectedProducts = [{ id: 1, name: 'test' }]

ᴋʏʟʟɪᴀɴOP•2mo ago

yeah reloading my vscode fixed this, lol idk it just likes to break at times

dwol•2mo ago

when adding a new file a lot of the time I need to run the npx nuxt prepare command

Gaming

Programming

v-for doesnt infer type from computed

Did you find this page helpful?