How can I achieve this naming pattern for sequentially rendering instances of <BaseComponent> in vue without utilizing a for loop, Array.from, or passing additional props?

[amantiwari1]

How can I achieve this naming pattern for sequentially rendering instances of <BaseComponent> in vue without utilizing a for loop, Array.from, or passing additional props?

Provide 3 instances of the component without any props:

<BaseComponent />
<BaseComponent />
<BaseComponent />

In the browser, it will display as follows:

• base-component-1
• base-component-2
• base-component-3

If you add one more <BaseComponent />, it will be displayed as base-component-4, for example.

When you input 4 components without props:

<BaseComponent />
<BaseComponent />
<BaseComponent />
<BaseComponent />

The output in the browser will appear like this:

• base-component-1
• base-component-2
• base-component-3
• base-component-4

So, how can I achieve this without using a for loop, Array.from, or props?

[Shyam-Chen]

<template>
  <div>Comp-{{ uid }}</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

let uid = 0;

export default defineComponent({
  setup() {
    uid += 1;
    
    return { uid };
  },
});
</script>

<script lang="ts" setup>
import Comp from './Comp.vue';
</script>

<template>
  <Comp />
  <Comp />
  <Comp />
</template>

https://play.vuejs.org/#eNp9UstOwzAQ/BXLF1pRElBvJa0EqAc4AAKOvkTJNrg4duRHiRTl31lvmz4E9GJ7d2bk2UfH75om2QTgM565wsrGM5Xrai64d4IzBz40C6Fl3Rjr2YOpG7aypmYXSRqDKL24FTpLt2KkYuChblTuASPGMhKlZ95ZuhfwCf5bGL2SVbJ2RqOtLpIFL5AtFdiXxkuj0duMERKxXCnz/UQ5bwNMhnzxCcXXH/m1a2NO8FcLDuwGBN9jPrcV+C28fH+GFt97sDZlUMg+A76BMypEj1vafdAl2j7ikdtHaqjU1Ydbth60G4qKRiOzJ77g2ODYqP9KP9idJlPSCd1jF4fhxLmejqOUm0VEr7qOBVmyvs/SmDuZA43x9z4cNqFjJaykJm9Gg/as3y3GbiOEVuDpgzm7phhaUqIuD4ruY/2ISqJ9G42H+qL8cs5uUE/l0mmRYzU6IPcExWb14+M95P0PrYzyHw==