タイトルを次のように書き換えます: 1 つの項目を true に設定し、他のすべての項目を false に設定した VueJS 応答要素
P粉786800174
P粉786800174 2023-08-28 20:55:03
0
1
481

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

P粉786800174
P粉786800174

全員に返信 (1)
P粉111627787

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

リーリー

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

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

いいねを押す+0
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート
    私たちについて 免責事項 Sitemap
    PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!