Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to render component instance with h() function in Vuejs?

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?

Tags:

2

Answers


  1. 0

    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. 0

    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