Recently, I've been exploring the slot component feature of Vue.js with the aim of understanding how to manipulate component information using slots. I decided to create a simple code snippet in order to grasp the concept of slot components better. However, my initial attempt was unsuccessful.
I created two components: one main component called "ApptestMaster.vue" and another child component named "ApptestChild.vue". My intention was to display a list of information from the child component within the ApptestMaster component. Unfortunately, only the button is being displayed. Any suggestions would be greatly appreciated!
↓Below is the code for the main component "ApptestMaster.vue"
<template>
<v-app>
<ApptestChild name="hoge">
<ul>
<li>List1</li>
<li>List2</li>
<li>List3</li>
</ul>
</ApptestChild>
</v-app>
</template>
<script lang="ts">
import {Component,Vue} from 'nuxt-property-decorator'
import ApptestChild from '~/components/ApptestChild.vue'
@Component({components:{ApptestChild},})
export default class ApptestMaster extends Vue{
}
</script>
↓And here is the child component "ApptestChild.vue"
<template>
<div>
<v-btn name="hoge" @click="onClick">Click</v-btn>
<v-slot v-if="display"></v-slot>
</div>
</template>
<script lang="ts">
import {Component,Vue} from 'nuxt-property-decorator'
@Component
export default class ApptestChild extends Vue{
display:boolean=true;
onClick(){
this.display = !this.display
}
}
</script>