VUEX for VUE component

Question

I have a VUE component JobComponent.vue and I use VUEX to get data from jobs.js. When I use this component in Home.vue I want to render it just for five times and in reverse mode, just the last 5 items starting with the last one. Now, it renders 7 times, because of the v-for from JobComponent.vue.

JobComponent.vue

<div v-for="job in allJobs" :key="job.id" class="card">
    <div class="position">{{ job.position }}</div>
    <div class="department">{{ job.department }}</div>
    <div class="location">
      <span class="material-symbols-outlined">location_on</span>
      {{ job.location }}
    </div>
    <span class="material-symbols-outlined right-arrow">arrow_right_alt</span>
    <span @click="deleteJob" class="material-symbols-outlined right-arrow">delete</span>
  </div>

Home.vue

  <div class="cards-container">
      <JobComponent />
  </div>

jobs.js

const state = {
    jobs: [
        {
            position: "2",
            department: "2",
            location: "2",
            id: 2
          },
          {
            position: "3",
            department: "3",
            location: "3",
            id: 3
          },
          {
            position: "4",
            department: "4",
            location: "4",
            id: 4
          },
          {
            position: "5",
            department: "5",
            location: "5",
            id: 5
          },
          {
            position: "6",
            department: "6",
            location: "6",
            id: 6
          },
          {
            position: "7",
            department: "7",
            location: "7",
            id: 7
          }
    ]
};

Before VUEX I was fetching data in every VUE file that I need, I used v-for with slice() and reverse() method.

make a getter to return the last 5 reversed jobs from your state to use with your v-for — yoduh
– yoduh, Commented Nov 18, 2022 at 19:34

homayounKh · Accepted Answer · 2022-11-19 09:25:29Z

1

You can define allJobs as vuex getters and use computed property for what you want.

computed: {
  allJobs() {
    return this.$getters.allJobs.reverse().slice(0, 5);
  }
}

answered Nov 19, 2022 at 9:25

homayounKh

511 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Zarko Over a year ago

Or even further, you can define the getter with a parameter for slice and use it that way. docs here

kevsterdev Over a year ago

@homayounKh can you be more specific with the code example, I didn't understand very well. Thanks!

homayounKh Over a year ago

@kevsterdev my response was an example :) see this link

Collectives™ on Stack Overflow

VUEX for VUE component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related