여러 조건에 따라 배열 내의 항목 값을 변경하려면 어떻게 해야 합니까?

여러 조건에 따라 배열 내의 항목 값을 변경하려면 어떻게 해야 합니까?

배열 내의 다른 항목과 일치하여 배열 내의 항목 값을 변경하려고 합니다.어레이에는 섹션 세부 정보(고유하지 않음), 원하는 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다른 항목(두 번째, 세 번째 항목)은 false로 설정되며 '로컬' 섹션은 아무것도 변경되지 않습니다.

나는 이 문제를 해결하기 위해 노력해왔다.forEach루프가 무효가 되어 버립니다만, 이것이 올바른 어프로치라고 생각됩니다.사용.findIndex이 섹션은 여러 항목이 발견되기 때문에 실패할 것으로 보입니다.

첫 번째 SO 질문 - 제가 질문한 방식에 문제가 있다면 선제적으로 사과드립니다.Vue3를 쓰고 있어요.조언해 주셔서 감사합니다.

적절한 섹션의 항목 테스트를 반복하십시오.섹션이 있는 경우id일치, 세트selectedtrue, 그렇지 않으면 true로 설정selectedfalse:

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

함수를 호출합니다.

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

언급URL : https://stackoverflow.com/questions/65267710/how-can-i-change-the-value-of-an-item-in-an-array-based-on-multiple-conditions