タイトルを次のように書き換えます: 1 つの項目を true に設定し、他のすべての項目を false に設定した VueJS 応答要素

Question

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 に関する私の最初の投稿です。十分な詳細を提供していない場合はお知らせください。

Answer 1

このように Array.prototype.reduce と Object.entries を使用して、sections のキーと値のペアをループし、次のように設定してみることができます。 true/false が必要なので、新しい sections オブジェクトを作成します:

リーリー

プロパティを直接変更する必要がある場合は、Array.prototype.forEach:

を使用できます。 リーリー ＃＃＃それが役に立てば幸い！