Child components not rendering when referenced dynamically in composition API-CodePudding

I'm converting some components from vue 3's option API to the composition API. In this particular component I have two nested child components:

<script lang="ts" setup>
import ShiftOperation from "@/components/transformation-widgets/ShiftOperation.vue";
import RawJolt from "@/components/transformation-widgets/RawJolt.vue";

console.log([ShiftOperation, RawJolt])

...

From what I understand, if you're using the setup attribute in the script tag then all you have to do is import the component into a variable like I'm doing above and it should be available for the template without having to do anything else, like it's not like the old options api where you had to inject those components into the parent component.

Both components are imported successfully (confirmed by the console log:

When I'm rendering out this parent component I'm using the two child components to render out an array of data where I reference the children dynamically in the template based on information in each block of data that I'm iterating over:

<template>
  <div >
    <component
        v-for="(block, index) in store.specBlocks"
        v-bind:key="index"
        :block="block"
        :index="index"
        :is="determineBlockComponent(block)"
        @block-operation-updated="updateBlock"
    >
    </component>
  </div>
</template>

// logic for determining the component to use:
export const determineBlockComponent = (block: JoltOperation) => {
  switch (block.renderComponent) {
    case 'shift':
      return 'ShiftOperation'
    default:
      return 'RawJolt'
  }
}

This worked fine in the options api version of it, but for some reason the components don't actually render. They show up in the elements tab:

But they don't show up in the view. I also added a created lifecycle hook into the child components that just console.log's out saying "created X", but those hooks don't fire.

Business logic wise nothing has changed, it's just been going from option api to composition api, so I'm assuming I'm missing some key detail.

Any ideas?

CodePudding user response：

Your determineBlockComponent function should not return the string but the object of the component. Replace return 'ShiftOperation' with return ShiftOperation