I am using Vuejs(2.6.11) Dynamic Slot Names Eerror: Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed.
Why Error?
Here is my code:
LightBox.vue file
<template>
<div>
<header>
<slot name="header">Default Header</slot>
</header>
<hr />
<main>
<slot>Default Body</slot>
</main>
<hr />
<footer>
<slot name="footer">Default Footer</slot>
</footer>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
</style>
App.vue file
<template>
<div id="app">
<label v-for="(opt, index) in options" :key="index">
<input type="radio" :value="opt" v-model="dynamic_slot_name" /> {{ opt }}
</label>
<br><br><hr>
<light-box>
<template v-slot:[dynamic_slot_name]>
<h2>Hello Kieey</h2>
</template>
</light-box>
</div>
</template>
<script>
import LightBox from "./components/LightBox.vue";
export default {
name: "App",
components: {
LightBox,
},
data() {
return {
options: ["header", "footer", "default"],
dynamic_slot_name: "header",
};
},
};
</script>
<style>
</style>