Vue.js
index
<![CDATA[
<template>
<v-container>
<div class="text-center">
<v-dialog v-model="dialog" width="500">
<template v-slot:activator="{ on, attrs }">
<v-btn color="red lighten-2" dark v-bind="attrs" v-on="on">Click Me</v-btn>
</template>
<Modal :items="items" />
</v-dialog>
</div>
</v-container>
</template>
<script>
import Modal from './aa/modal'
export default {
components: { Modal },
data() {
return {
dialog: false,
items: [
{ id: 1, title: 'AAAAAAAAA', text: 'aaaaaaaaaaaaaa' },
{ title: 'AAAAAAAAA', text: 'aaaaaaaaaaaaaa' },
{ title: 'AAAAAAAAA', text: 'aaaaaaaaaaaaaa' },
{ title: 'AAAAAAAAA', text: 'aaaaaaaaaaaaaa' },
{ title: 'AAAAAAAAA', text: 'aaaaaaaaaaaaaa' },
{ title: 'AAAAAAAAA', text: 'aaaaaaaaaaaaaa' },
],
}
},
}
</script>
]]>
modal
<![CDATA[
<template>
<div>
<v-card v-model="items" v-for="item, index in items" :key="index">
<v-card-title class="text-h5 grey lighten-2">{{ item.title }}</v-card-title>
<v-card-text>{{ item.text }}</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" text @click="dialog = false">I accept</v-btn>
</v-card-actions>
</v-card>
</div>
</template>
<script>
export default {
props: {
items: Array, // 배열
},
}
</script>
]]>