I am unsure about how to dynamically create components without using the <component :is=''> tag. I would like to insert a component into the DOM through JavaScript.
Similar to how you would add a new modal in jQuery with
$("body").append("<div class='modal'></div>")For example: https://jsfiddle.net/yu9oca2n/
View code here: https://codesandbox.io/embed/vue-template-5cx5l?fontsize=14
JQuery
Sample JQuery code:
$("#button").click(function() {
$("#modals").append("<div class='modal'>modal</div>");
});<!doctype html>
<html>
<head></head>
<body>
<div id="modals"></div>
<hr>
<button id="button">add input tag</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>VUE
Parent Component:
<template>
<div>
<p>Hello</p>
<hr>
<a @click="insertModal">Insert Modal</a>
<hr>
<modal num="1"></modal>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {},
methods: {
insertModal() {
/**
* How to do so that when you enter here,
* add one more modal, without putting this in a list,
* because this modal can be called from anywhere on the web
*
* MODAL : <modal num="_x_" @clickEvent="eventClick"></modal>
*/
// ??
}
},
eventClick() {
/** modal event click */
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
Component Modal:
<template>
<div>MODAL {{num}}</div>
</template>
<script>
export default {
name: "modal",
props: ["num"],
data: function() {
return {};
},
methods: {}
};
</script>