Vue 3 make same multiple cards with different contents

Issue

I got this result: Content got double but, not cloning as a card element

Content got double but, not cloning as a card element

here’s the code

<script setup>
import { ref } from 'vue';

defineProps({
  project: String,
});

const projectList = ref([
  {
    img: './src/assets/img/Pp.png',
    tag: 'React JS',
    name: 'Destination List App',
    desc: 'Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas..',
  },
  {
    img: './src/assets/img/PP2.png',
    tag: 'HTML CSS JS',
    name: 'City Specialties App',
    desc: 'Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas..',
  },
]);
</script>

and here is the template tag

<div>
  <!-- I want this whole element below to be multiplied -->
  <div class="col-md-4">
    <div class="card card--project">
      <img class="card__img" v-for="project in projectList" v-bind:key="project.img" :src="project.img" alt="" />
      <div class="card__text">
        <p class="project-label text-md text-md--md" v-for="project in projectList" v-bind:key="project.tag">{{ project.tag }}</p>
        <h4 class="text-gradient-primary" v-for="project in projectList" v-bind:key="project.name">{{ project.name }}</h4>
        <p class="project-desc text-md" v-for="project in projectList" v-bind:key="project.desc">{{ project.desc }}</p>
        <a href="#" class="links">Read More</a>
      </div>
    </div>
  </div>
</div>

I want to make a card section that look like this

desired result

Solution

That’s because you are looping all the images, tags, etc individually. As you said you want the whole element to be multiplied in your comments, that’s what you need to do, loop the whole card.

<div>
   <!-- I want this whole element below to be multiplied -->
   <div class="col-md-4" v-for="(project,id) in projectList" v- 
       bind:key="project.id" >
        <div class="card card--project">
       <img class="card__img" " :src="project.img" alt="" />
       <div class="card__text">
        <p class="project-label text-md text-md--md" >{{ project.tag }}</p>
        <h4 class="text-gradient-primary">{{ project.name }}</h4>
        <p class="project-desc text-md" >{{ project.desc }}</p>
        <a href="#" class="links">Read More</a>
      </div>
    </div>
  </div>
</div>

Answered By – Abhinav Gunishetty

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published