如何根據多個條件更改數組中項目的值？

Question

我正在嘗試根據匹配數組中的其他項目來更改數組中項目的值。 該數組可能包含部分的詳細信息（非唯一）、唯一 ID 和我希望更改的值（在本例中為“選定”標志）。 目標是能夠擁有多個可以具有其選定標志的項目。 在任何單個部分中，只能“選擇”一個項目，但多個部分可以“選擇”單個項目。 從概念上講，我認為這與擁有多組單選按鈕的方式相同。

最終目標是能夠使用state記住在使用道具創建的組件中所做的選擇。 我很想了解不僅僅是復制。 接下來我將了解 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'

我將如何創建一個 function 可以更改具有id: First item為 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;
       }
    });
  }
}

致電 function：

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