how to create a vue3 element dynamic and programatically?

Question

I know how to create one element in declarative way. Ex:

<v-btn>hello</v-btn>

And i know how to create a bunch of repeated elements in declarative way. Ex:

<v-btn v-for="index in 10" :key="index">{{ `hi! ${index}` }}</v-btn>

But I dont found a way to create one element in programmatical way.
I just want to do : "let el = new Element()"
And then: DOM.putNewElement(el)

I dont found how to do this on vue documentation and I want to know if is a "way of be" of vue. Can you tell me what i'm miss?

I have been try all solution on internet but nothing works

Possible duplicate of stackoverflow.com/questions/46631134/… . Could be XY problem if it doesn't suit you — Estus Flask
– Estus Flask, Commented Mar 7, 2024 at 18:43
declare the element in your template with v-if set to false, then programmatically "create" the element by switching the v-if to true. combine with dynamic components <component :is= you then have both dynamic and programmatic creation of elements. — yoduh
– yoduh, Commented Mar 7, 2024 at 19:32

fan fan · Accepted Answer · 2024-03-09 09:52:17Z

2

you also can use jsx in your project,it is easy for coding

<script setup>
import { ref, h } from 'vue'

const msg = ref('Hello World!')

const some = () =><button onClick={()=>{console.log(msg.value)}><button/>
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
  <some/>
</template>

answered Mar 9, 2024 at 9:52

fan fan

211 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Alexander Nenashev · Accepted Answer · 2024-03-08 09:41:24Z

1

The most important thing about Vue that you work rather with Virtual DOM, not DOM itself, so forgot about manipulating DOM directly. All your templates in Vue are converted into render function that build Virtual DOM nodes.

You can do it yourself, learn in the docs:

https://vuejs.org/guide/extras/render-function

An example:

VUE SFC PLAYGROUND

<script setup>
import { ref, h } from 'vue'

const msg = ref('Hello World!')

const some = () => h('button', {onClick: () => alert(msg.value)}, 'Display message');

</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
  <some/>
</template>

answered Mar 8, 2024 at 9:41

Alexander Nenashev

26.1k3 gold badges11 silver badges29 bronze badges

1 Comment

aguiadouro Over a year ago

thankyou! this is exact what i want! I will read about this now!!!

Collectives™ on Stack Overflow

how to create a vue3 element dynamic and programatically?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related