v-if 和 splice on users 从 v-model 中挑选答案

【问题标题】：v-if and splice on users pick from v-modelv-if 和 splice on users 从 v-model 中挑选
【发布时间】：2020-10-20 18:26:47
【问题描述】：

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

<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 的新手，已经尝试了几件事，但没有一个有效。

如何将这些绑定在一起，我需要在我的中使用 task.splice 吗？

谁有想法，怎么办？

【问题讨论】：

标签： javascript html vue.js quasar

【解决方案1】：

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

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

【讨论】：

这绝对可以完成切片和连接两者的工作。唯一的问题是，每当用户按下“1”时，它会显示 3 个任务，如果用户然后按下 2，它只会显示任务。有什么方法可以“刷新”taskItems，以便用户可以改变主意并按“3”然后按“1”然后按“2”，而无需清空taskItems数组？
是否可以制作代码 sn-p、小提琴或任何“工作”示例？
Cedric，没关系 - 你的答案是我所要求的，它有效。次要部分本身就是一个问题，我会找到解决方案。

【解决方案2】：

这是徒手画的，所以它可能不是 100% 正确的，但是你可以在 Vue 中模拟一个 index 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++)

【讨论】：

Dan，我选择了 Cedrics 解决方案，因为它很容易转移到我自己的解决方案中，提供了我正在寻找的价值。我无法通过使用您的方法使其工作，但这很可能是因为我的 vue 技能不足以将半伪转移到我自己的解决方案中。