>source

배열의 다른 항목과 일치하는 항목을 기준으로 배열의 항목 값을 변경하려고합니다. 배열에는 섹션의 세부 정보 (고유하지 않음), 고유 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: First item true로, 나머지 (두 번째, 세 번째 항목)는 false로 설정하고 'Local'섹션에서 아무것도 변경하지 않습니까?

나는 내 머리를 사용하려고 노력했습니다. forEach 이것이 올바른 접근 방식이라고 느끼더라도 아무 소용이 없습니다. 사용 findIndex 섹션은 여러 항목을 찾을 수 있기 때문에 실패 할 운명 인 것 같습니다.

첫 번째 질문-내가 요청한 방식에 문제가 있으면 선제 적으로 사과합니다. Vue3를 사용하고 있습니다. 모든 조언에 감사드립니다.

  • 답변 # 1

    적절한 섹션을 테스트하는 항목을 반복합니다. 섹션과 함께 id 일치, 설정 selected true로 설정하지 않으면 selected 거짓으로 :

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

    함수를 호출하십시오.

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

관련 자료

  • 이전 javascript - HTML Canvas에서 점수가 업데이트되는 함수 외부의 다른 함수에서 업데이트 된 점수를 사용하는 데 문제가 있습니다
  • 다음 rust deserialization - 바이트 벡터를 uuid의 해시 세트로 변환