Как создать элемент vue3 динамически и программно?
Я знаю, как создать один элемент декларативным способом. Бывший:
<v-btn>hello</v-btn>
И я знаю, как декларативно создать кучу повторяющихся элементов. Бывший:
<v-btn v-for = "index in 10" :key = "index">{{ `hi! ${index}` }}</v-btn>
Но я не нашел способа создать один элемент программно.
Я просто хочу сделать: «let el = new Element()»
И затем: DOM.putNewElement(el)
Я не нашел, как это сделать в документации по vue, и хочу знать, является ли это «образом существования» vue. Можете ли вы сказать мне, что я скучаю?
Я пробовал все решения в Интернете, но ничего не помогло
объявите элемент в своем шаблоне, установив для v-if значение false, а затем программно «создайте» элемент, переключив v-if на true. комбинируйте с динамическими компонентами <component :is= тогда у вас будет как динамическое, так и программное создание элементов.
Ответы 2
Самое главное в Vue то, что вы работаете скорее с Virtual DOM, а не с самим DOM, поэтому забыли о непосредственном манипулировании DOM. Все ваши шаблоны в Vue преобразуются в функцию рендеринга, которая создает узлы Virtual DOM.
Вы можете сделать это самостоятельно, узнайте в документации:
https://vuejs.org/guide/extras/render-function
Пример:
<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>
Спасибо! это именно то, что я хочу! Я сейчас прочитаю об этом!!!
вы также можете использовать jsx в своем проекте, его легко кодировать
<script setup>
import { ref, h } from 'vue'
const msg = ref('Hello World!')
const some = () =><button onClick = {()=>{console.info(msg.value)}><button/>
</script>
<template>
<h1>{{ msg }}</h1>
<input v-model = "msg" />
<some/>
</template>
Возможный дубликат stackoverflow.com/questions/46631134/…. Может быть проблема XY, если это вас не устраивает