VueJS のコンポジション API を使用してアプリケーションを開発しています。 以下に示すようにレスポンシブ要素を設定しました

constセクション = reactive({ セクション1: 本当、 セクション2: 偽、 セクション3: 偽、 セクション4: 偽、 セクション5: 偽、 セクション6: 偽 })

ページ上の各ボタンがクリックされたときに、ブール値に基づいて (他の多くの操作の中でも特に) 個々の要素を表示または非表示にしたいと考えています。 このコードにあるように、ボタンごとにすべてを個別に設定する関数を作成できます

const Section1Button= () => { セクション.セクション1 = true、 セクション.セクション2 = false、 セクション.セクション3 = false、 セクション.セクション4 = false、 セクション.セクション5 = false、 セクション.セクション6 = false } constセクション2ボタン= () => { セクション.セクション1 = false、 セクション.セクション2 = true、 セクション.セクション3 = false、 セクション.セクション4 = false、 セクション.セクション5 = false、 セクション.セクション6 = false }

これは間違いなく機能しますが、実際には 1 つの変更だけで複数の関数を作成する必要があることを意味します。 このタスクを達成するためのより効率的な方法はありますか? ループかif文でやればいいような気がするのですが、思いつきません。 これは stackoverflow に関する私の最初の投稿です。十分な詳細を提供していない場合はお知らせください。