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

Question

我正在尝试根据匹配数组中的其他项目来更改数组中项目的值。该数组可能包含部分的详细信息(非唯一)、唯一 ID 和我希望更改的值(在本例中为“已选择”标志)。目标是能够有多个项目可以有他们选择的标志。在任何一个部分中，只能“选择”一个项目，但多个部分可以“选择”一个单独的项目。从概念上讲，我认为这可以用与多组单选按钮相同的方式来考虑。

最终目标是能够使用 state 记住在使用 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: 第一项 的项目的选定标志更改为 true，将其他项(第二、第三项)更改为 false，并且不做任何更改在“本地”部分？

我曾尝试使用 forEach 循环来解决问题，但无济于事，尽管这感觉是正确的方法。对该部分使用 findIndex 似乎注定要失败，因为要找到多个项目。

第一个 SO 问题 - 如果我问的方式有问题，那么先发制人的道歉。我正在使用 Vue3。感谢所有建议。

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