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

Question

我有以下代码（来自教程，但我想扩展一下）：

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

我的 taskItems 数组如下所示：

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'
          }
        ]

我有以下 v-model:

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

用户可以通过点击按钮来选择一个对象（因为这不是主要焦点而被忽略），如果他们选择第一个，那么它等于值“1”，如果他们选择第二，则等于'2'，依此类推

问题是，我希望我的 v-for 位于顶部，其中包含 4 个任务，以显示其数组中等于用户选择的 numberOfTasks 的元素数。

因此，如果用户选择值：'3'，则 v-for 将仅显示任务数组中的 3 个任务。

我是 Vue 的新手，尝试过一些东西，但 none 有效。

如何将它们绑定在一起，我是否需要在我的 ?

中使用 task.splice

任何人有想法，该怎么办？

Answer 1

这是徒手写的，所以可能不是 100% 正确，但你可以在 Vue 中模拟索引 for 循环。我添加了一个变量 selectedNumberOfTasks，它只是一个数字（数据变量或其他），代表用户选择的内容。

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

这将在变量 index 中计数到最大值 selectedNumberOfTasks。等效于 JS 的 for 循环是

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

Answer 2

我假设 taskItems 是一个属性数据以及 numberOfTask 存储选择的值形式 numberOfTasks。您需要在 v-for="task in actualTaskItems" 中更改 v-for="task in taskItems"，其中 actualTaskItems 是计算的属性，就像这样

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

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

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

html

javascript

vue.js

quasar