skip to Main Content

I have a Vuejs component that looks like this:

<template>
  <button @click="generateItem()">Add item</button>
  <div class="container"></div>
</template>

<script setup>
  import { h } from 'vue'
  import MyItem from '@/components/MyItem.vue'

  function generateItem(){
    return h(MyItem)
  }
</script>

I’m trying to use an h() function to render an instance of MyItem inside div.container when running generateItem(). But after reading the official Vuejs docs on the h() function I don’t get how to make this happen. Thoughts on how to get this done?

2

Answers


  1. I believe the render function is not meant to be used with <script setup>.
    It is used as a flexible alternative to declare your render function programmatically, instead of using a template within a Vue SFC.

    That said, you can achieve rendering a generated item like so:

    <script setup>
      import { h, ref, shallowRef } from 'vue'
      import MyItem from './MyItem.vue'
    
    
      const component = shallowRef(null)
      function generateItem(){
        component.value = MyItem
      }
    </script>
    
    <template>
      <button @click="generateItem()">Add item</button>
      <div class="container">
    
        <component v-if="component" :is="component" :testStr="'The test str from App.vue'"></component>
      </div>
    </template>
    

    (see this playground url here: Vue SFC Playground)

    This also works if you wrap with h(), but I believe it to be unnecessary:

    component.value = h(MyItem)
    
    Login or Signup to reply.
  2. Use v-for (adapt to your needs):

    Playground

    <template>
      <button @click="generateItem()">Add item</button>
      <div class="container">
        <my-item v-for="item in items">{{ item }}</my-item>
      </div>
    </template>
    
    <script setup>
      import { reactive } from 'vue'
      import MyItem from './MyItem.vue'
      const items = reactive([]);
      let counter = 1;
      function generateItem(){
        items.push('Item ' + counter++)
      }
    </script>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search