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?

score 0 · Answer 1 · answered Oct 20 '20 at 18:37

0

This is freehand so it might not be 100% correct, but you can simulate an index for loop in Vue. I've added a variable selectedNumberOfTasks which would just be a number (a data variable or something) that represents what the user has selected.

  <div v-for="index in selectedNumberOfTasks" :key="index">
    {{ taskItems[index].text }}
  </div>

This will count up in the variable index to a max of selectedNumberOfTasks. The JS for loop equivalent would be

for (let i = 0; i < this.selectedNumberOfTasks; i++)

answered Oct 20 '20 at 18:37

Dan

351
4
16

Dan, I went with Cedrics solution, as it was easy to transfer to my own, giving the value I was looking for. I couldn't make it work by using yours, but that's probably more likely due to my vue-skills not being good enough to transfer half-pseudo to my own solution. – nelion Oct 20 '20 at 20:11

score 0 · Accepted Answer · answered Oct 20 '20 at 18:44

0

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);
   }
}

answered Oct 20 '20 at 18:44

Cedric Cholley

1,956
2
9
15

This definitely does the job about slicing it and connecting the two. Only problem is, that whenever a user presses '1', then it shows 3 tasks, if the user then presses 2, it shows only task. Is there someway I can sort of 'refresh' the taskItems, so that the user can change his mind and press '3' then '1' then '2', without sort of emptying the taskItems array? – nelion Oct 20 '20 at 19:07
Would it be possible to make a code snippet, a fiddle or any "working" example ? – Cedric Cholley Oct 20 '20 at 19:49
Cedric, nevermind - your answer was what I was asking for and it works. The secondary part is a question itself and I will find a solution. – nelion Oct 20 '20 at 19:51

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

2 Answers2