v-if and splice on users pick from v-model

Question

I have the following code (from a tutorial, but I want to expand it a bit):

<div style="margin-top: 10px;">
  v-for="task in taskItems"
  :key="task.id"
  <q-icon :name="task.icon"/>
  <div
    {{ task.text }}
  </div>
</div>

my taskItems array looks like this:

taskItems: [
          {
            id: 1,
            icon: 'settings',
            text: 'Dolor, sit amet consectetm tot',
            name: 'style'
          },
          {
            id: 2,
            icon: 'exit',
            text: 'Lossssr dolor, sit amet consectetm tot',
            name: 'getaway'
          },
          {
            id: 3,
            icon: 'lego',
            text: 'Lomet consectetm tot',
            name: 'buildingblocks'
          },
          {
            id: 4,
            icon: 'lego',
            text: 'Lomet consectetm tot',
            name: 'buildingblocks'
          }
        ]

and I have the following v-model:

numberOfTasks: [
  { value: '1', label: '1' },
  { value: '2', label: '2' },
  { value: '3', label: '3' },
  { value: '4', label: '4' },
}

where a user can pick an object by clicking on a button (left out since that isn't the primary focus) and if they choose the first, then it is equal to value '1', if they choose the second, then it's equal to '2', etc.

The thing is, that I want my v-for at the top, which contains 4 tasks, to show the number of elements from its array equal to the numberOfTasks, that the user chooses.

So if the user chooses value: '3', then the v-for will only show 3 tasks from the tasks array.

I am new to Vue and have tried several things out, but none works.

How do I bind these together and do I need to use task.splice in my ?

Anyone have an idea, what to do?

Answer 1

I'll assume taskItems is a property of data as well as numberOfTask which store the value choosen form numberOfTasks. You need to change v-for="task in taskItems" in v-for="task in actualTaskItems" where actualTaskItems is a computed property like so

// …
computed: {
   actualTaskItems() {
       return this.taskItems.splice(0, this.numberOfTask);
   }
}