UserView - Vue

UserView.Vue

<template>
  <div>
    <div>My portfolio</div>
    <div v-if="featureItem" class="feature-item">
      <h4>{{featureItem.title}}</h4>
      <p>{{featureItem.description}}</p>
      <img :src="featureItem.image" />
    </div>
    <ul class="image-wrapper">
      <li
        class="image"
        v-for="(project, index) in projects"
        :key="project.title"
        @click="moveToFeature(index)"
      >
        <img :src="project.image" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "UserView",
  props: ['projects'],
  data: () => {
    return {
      featureItemIndex: -1
    }
  },
  computed: {
    featureItem(){ 
      const currentItem = this.projects[this.featureItemIndex]
      return currentItem
    }
  },
  methods: {
    moveToFeature(index) {
      this.featureItemIndex = index
    }
  }
};
</script>

<style>
.image-wrapper {
  margin: 16px;
  display: flex;
  justify-content: space-between;
}

.image {
  max-width: 45%;
  margin-bottom: 16px;
}
</style>