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

【问题标题】：How can I change the value of an item in an array based on multiple conditions?如何根据多个条件更改数组中项目的值？
【发布时间】：2021-03-23 20:02:09
【问题描述】：

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

最终目标是能够使用state 记住在使用道具创建的组件中所做的选择。我很想了解不仅仅是复制。接下来我将了解状态突变，但最好先解决这个问题。

所以，取一个像这样的数组：

    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，并且不更改“本地”部分中的任何内容？

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

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

【问题讨论】：

标签： javascript arrays vue.js vuejs2 vue-component

【解决方案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');

【讨论】：