[Vuejs]-VUE3 use different v-for for the same component

by

0👍

✅

Your component should be as independent as possible from the store. It’s role is to display what ever is provided so it could be reused as you want, using props :

JobComponent.vue

<template>
  <div class="card">
    <div class="position">{{ position }}</div>
    <div class="department">{{ department }}</div>
    <div class="location">
      <span class="material-symbols-outlined">location_on</span>
        {{ location }}
    </div>
    <span class="material-symbols-outlined right-arrow">arrow_right_alt</span>
    <span @click="$emit('deleteJob', id)" class="material-symbols-outlined right-arrow">delete</span>
  </div>
</template>

<script>
export default {
  props: {
    id: string,
    position: string,
    department: string,
    location: string
  }
}
</script>

In this component you only display the provided data, and leave the responsibility of the parent component to choose how many components to display.

Home.vue

<template>
  <div class="cards-container">
    <JobComponent v-for="job in jobs" :key="job.id" :id="job.id" :position="job.position" :department="job.department" :location="job.location" @delete-job="deleteJob" />
  </div>
</template>

<script>
export default {
  created() {
    this.$store.dispatch('fetchJobs')
  },
  computed: {
    jobs() {
      return this.$store.getters['latestJobs'] // Or allJobs, just make sure your getter returns an array even if no jobs are loaded yet.
    }
  },
  methods: {
    deleteJob() {
      // Your logic for job delete
    }
  }
}
</script>

Leave a comment