I received this outcome: Content duplicated but not cloned as a card element
Below is the code snippet
<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 markup
<div>
<!-- I want this entire block below to be replicated -->
<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 aim to create a section of cards that resembles the design above