<script setup> import i18n from "@/i18n.js"; import {ref} from "vue"; const props = defineProps(["extCurrList"]) const extCurrList = ref(props.extCurrList) console.log(extCurrList) </script> <template style="margin-top:5%;"> <div style="display:flex; justify-content:center; " v-for="item in extCurrList"> <div class="bodu"> <div class="container"> <div class="status"><a style="margin-left:30px">{{item.state}}</a></div> <div class="school"><a>{{item.school}}</a></div> <div class="formation"><a>{{item.formation}}</a></div> <div class="completion"><a>{{item.completion}}</a></div> <div class="download"><button>Download document</button></div> </div> </div> </div> </template> <style scoped> .container{ color:white; height:100px; font-size:30px; display:grid; grid-template-columns:15% 10% 20% 15% 13.1%; grid-template-areas: "status school formation completion download"; column-gap:10px; } .status { grid-area:status; align-self:center; font-size: 70%; } .school{ grid-area:school; align-self:center; font-size: 70%; } .formation{ grid-area:formation; align-self:center; font-size: 70%; } .completion{ grid-area:completion; align-self:center; white-space: nowrap; overflow: hidden; text-overflow:ellipsis; font-size: 70%; } .download{ grid-area: download; align-self:center; } button{ font-size:15px; height:50px; width:75%; border:none; border-radius:20px; } .bodu { margin-top:2%; width:66%; border:2px solid black; border-radius:9px; background-color:rgb(50,50,50); } </style>