根据多个条件如何更改数组中的项的值？

Question

我正在尝试根据数组中其他项的匹配来更改项目的值。该数组可能包含节（非唯一）的详细信息，一个唯一的ID以及我希望更改的值（在这种情况下是“selected”标志）。目标是能够拥有多个可以具有其选定标志的项目。在任何单个部分内，只能选择一个项目，但多个部分可以有一个单独的项目被选中。从概念上讲，我认为这可以像拥有多个单选按钮组一样考虑。

最终目标是能够使用“状态”来记住使用props创建的组件中所做的选择。我希望能够理解这个问题并不是简单地复制代码。我将在解决此问题之后了解状态变化，但最好先解决此问题。

因此，以以下数组为例：

    menuItems: [
    {
      section: 'National',
      id: 'First item',
      selected: false
    },
    {
      section: 'National',
      id: 'Second item',
      selected: false
    },
    {
      section: 'National',
      id: 'Third item',
      selected: true
    },
    {
      section: 'Local',
      id: 'Fourth item',
      selected: false
    },
    {
      section: 'Local',
      id: 'Fifth item',
      selected: false
    },
    {
      section: 'Local',
      id: 'Sixth item',
      selected: true
    }
  ]

而一些搜索字符串如：

      searchSection: 'National',
      searchId: 'First item'

如何创建一个函数，能够将具有id：First item的项的选中标志更改为true，其他项（第二、第三项）更改为false，并且不更改“Local”部分中的任何内容？

我试图使用forEach循环，但一直无法理解，尽管这似乎是正确的方法。对于该部分使用findIndex似乎注定会失败，因为有多个项需要找到。

这是我的首个SO问题 - 如果我提出问题的方式存在问题，则先请谅解。我正在使用Vue3。欢迎提供所有建议。

- IainM

Answer 1

循环遍历项目并测试正确的部分。对于该部分，如果有匹配id，则将selected设置为true，否则将selected设置为false：

methods: {
  flag(searchSection, searchId) {
    this.menuItems.forEach(item => {
       if (item.section === searchSection) {
          item.selected = item.id === searchId;
       }
    });
  }
}

调用函数：

this.flag('National', 'First item');

- Dan