Issue
Using insertAdjacentHTML I can make div, span etc .. html element but cannot make custom tag forexample <myComponent> </myComponent>
Basically insertAdjacentHTML can generate html element, that's I know but custom Component is also consisted with html tag. So I think there must be a way, generate custom element using like insertAdjacentHTML or else.
I tried test component and basic html element. what I want is not generate html element but component.
code below is what I tried
"when someone click a button, then generate component" is my purpos
<template>
<button @click="test"></button>
</template>
<script setup>
import multiSelectComp from '@/views/utils/multiSelectComp'
function test(){
let tag = document.getElementById('test3');
tag.insertAdjacentHTML("afterend", `<multiselect
:arg=true>
</multiselect>`)
}
</script>
Solution
Your code creates a new component on click. Vue can do that in multiple ways.
v-if can be used to only render an element/component if a certain condition is true
v-for can render elements for a given a number of loops.
I've coded basic examples of both directives rendering elements in the following Vue Playground
<template>
<div class="wrapper">
<button @click="renderOne">click renders single component</button>
<multiSelectComp v-if="shouldRender"></multiSelectComp>
<button @click="renderMultiple">multiple click renders multiple component</button>
<multiSelectComp v-for="i in clicks" :key="i"></multiSelectComp>
</div>
</template>
<script setup>
import multiSelectComp from './multiSelectComp.vue'
import { ref } from 'vue'
/* strategy 1: single component that is not rendered until condition is true */
const shouldRender = ref(false)
function renderOne(){
shouldRender.value = true
}
/* strategy 2: render number of components equal to number of clicks */
const clicks = ref(0)
function renderMultiple() {
clicks.value++
}
</script>
Answered By - yoduh
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.