제목을 다음과 같이 다시 작성합니다. 하나의 항목이 true로 설정되고 다른 항목은 모두 false로 설정된 VueJS 반응형 요소

Question

VueJS의 구성 API를 사용하여 애플리케이션을 개발하고 있습니다. 아래와 같이 반응형 요소를 설정했습니다

const 섹션 = 반응형({
  섹션 1: 사실,
  섹션 2: 거짓,
  섹션3: 거짓,
  섹션4: 거짓,
  섹션 5: 거짓,
  섹션 6: 거짓
})

페이지의 각 버튼을 클릭하면 부울 값을 기반으로 개별 요소를 표시하고 숨기려고 합니다(다른 여러 작업 중에서). 이 코드에서 볼 수 있듯이 모든 것을 개별적으로 설정하는 각 버튼에 대한 함수를 작성할 수 있습니다

const section1Button= () =>
  섹션.섹션1 = true,
  섹션.섹션2 = 거짓,
  섹션.섹션3 = 거짓,
  섹션.섹션4 = 거짓,
  섹션.섹션5 = 거짓,
  섹션.섹션6 = 거짓
}
const section2Button= () =>
  섹션.섹션1 = 거짓,
  섹션.섹션2 = true,
  섹션.섹션3 = 거짓,
  섹션.섹션4 = 거짓,
  섹션.섹션5 = 거짓,
  섹션.섹션6 = 거짓
}

이것은 확실히 작동하지만 실제로는 단 한 번의 변경으로 여러 함수를 작성해야 한다는 의미입니다. 이 작업을 수행하는 더 효율적인 방법이 있습니까? 루프나 if 문을 사용하여 이 작업을 수행할 수 있어야 한다고 생각하는데, 생각이 나지 않습니다. 이것은 stackoverflow에 대한 나의 첫 번째 게시물입니다. 충분한 세부 정보를 제공하지 않은 경우 알려 주시기 바랍니다.

Answer 1

다음과 같이 Array.prototype.reduce和Object.entries来循环遍历sections的键/值对，并根据需要设置true/false，从而创建一个新的sections객체를 사용해 볼 수 있습니다.

으아악

속성을 직접 수정해야 하는 경우 다음을 사용할 수 있습니다. Array.prototype.forEach:

으아악

도움이 되길 바랍니다!