You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
836 B
Vue
58 lines
836 B
Vue
<template>
|
|
|
|
<header>
|
|
<h1>Story Baobab</h1>
|
|
</header>
|
|
|
|
<main>
|
|
<AddScene @add="add"/>
|
|
<section class="scenes">
|
|
|
|
<SceneEntry
|
|
v-for="(scene, index) in scenes"
|
|
:order="index+1"
|
|
:title="scene.title"
|
|
:description="scene.description"
|
|
:img="scene.img"
|
|
@remove="remove(index)"
|
|
/>
|
|
|
|
</section>
|
|
|
|
</main>
|
|
</template>
|
|
|
|
<script setup>
|
|
import AddScene from './components/AddScene.vue'
|
|
import SceneEntry from './components/SceneEntry.vue'
|
|
|
|
import {ref} from 'vue'
|
|
|
|
const scenes = ref([])
|
|
|
|
|
|
const add = (e) => {
|
|
scenes.value.push(e)
|
|
}
|
|
|
|
const remove = (index) => {
|
|
scenes.value.splice(index, 1)
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
header {
|
|
margin: 32px;
|
|
}
|
|
|
|
.scenes {
|
|
margin: 32px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16px;
|
|
}
|
|
|
|
</style>
|