I'm currently working on a Vue.JS photo website and I've hit a roadblock as described in the title. Despite trying various solutions, after spending two hours back and forth with ChatGPT, I've decided to seek help here.
Below is the code snippet from the parent component (named "MainNav"):
<template>
<div class="main_container">
<header class="header mx-5 my-9 absolute text-xl">Gonçalo Dias</header>
<div class="m-5 mt-80 space-y-1">
<div
class="sidebar-item"
@mouseover="showInnerSidebar"
@mouseleave="hideInnerSidebar"
>
Projects
<div
v-if="showProjectsInner"
class="inner-sidebar space-y-0.5 mt-1 mb-2"
>
<div
v-for="(project, index) in projects"
:key="index"
class="inner-sidebar-item indent-4"
@click="handleProjectClick(project)"
>
{{ project.name }}
</div>
</div>
</div>
<div>Diary</div>
<div>Info</div>
</div>
<ProjectOne
v-if="selectedProject && selectedProject.name === 'Project 1'"
:style="{ marginTop: selectedProject ? '10px' : '0' }"
/>
</div>
</template>
<script>
import ProjectOne from "./ProjectOne.vue";
export default {
components: {
ProjectOne,
},
data() {
return {
showProjectsInner: false,
selectedProject: null,
projects: [{ name: "Project 1" }, { name: "Project 2" }],
};
},
methods: {
showInnerSidebar() {
this.showProjectsInner = true;
},
hideInnerSidebar() {
this.showProjectsInner = false;
},
handleProjectClick(project) {
this.selectedProject = project;
this.showProjectsInner = false;
},
},
};
</script>
<style lang="scss">
.header {
top: 0;
left: 0;
width: 100%;
}
</style>
The following snippet showcases the code from the child component:
<template>
<div>
<div class="main_box project-image">
<img :src="require('@/assets/Project1/001.jpg')" />
<img :src="require('@/assets/Project1/005.jpg')" />
<img :src="require('@/assets/Project1/022.jpg')" />
<img :src="require('@/assets/Project1/034.jpg')" />
<img :src="require('@/assets/Project1/036.jpg')" />
</div>
</div>
</template>
<script setup></script>
<style lang="scss">
.main_box {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
.project-image {
max-width: 100%;
max-height: 100vh;
margin: 4px;
}
</style>
Take a look at the current appearance
without focusing on the image's large size as I need to resolve the issue first
As a beginner, I'm struggling to come up with many solutions. Even with assistance from Chat GPT, tweaking CSS properties and testing multiple variations has not allowed my images to break out of that sidebar container. It seems like a specific issue related to the CSS and template relationship between components, which points to a Vue system problem.