vuejsで親をクリックしたときのみ子を表示する

Question

ナビゲーションサイドバーを作成しようとしています。メインプロジェクトとサブプロジェクトがあります。

親項目をクリックしたときにのみ子項目を表示しようとしていますが、子項目をクリックしたときにアクティブな子項目の色が変わるようにしたいと考えています。どうすればこれを達成できますか?

これまでに私が試したことは次のとおりです。

ああああ

Answer 1

以下のようなスニペットを試してください (ネストされたリンク内の別の ul を見逃した場合は、リスト インデックスを使用してナビゲーションの表示/非表示を切り替えます):

新しい Vue({
  el: "#デモ",
  データ（） {
    戻る {
      ナビリンク: [
          {テキスト: '連絡先'、パス: '/contact'、サブリンク: [{ テキスト: 'メール'、パス: '/メール',},],
          }、
          {テキスト: '概要'、パス: '/about',},
        ]、
      以下リンク: [
        {テキスト: 'ブログ'、パス: '/blog',},
        {テキスト: 'ポートフォリオ'、パス: '/ポートフォリオ',},
      ]、
      表示: null、
      アクティブ: null
    }
  }、
  メソッド: {
    トグルナビ(i) {
      this.active = null
      this.show === i ? this.show = null : this.show = i
    }、
    setActive(i) {
      this.active === i ? this.active = null : this.active = i
    }
  }
})

ナビ{
  高さ: 100vh;
  ディスプレイ: フレックス;
  フレックス方向: 列;
  背景: #040521;
  コンテンツの位置揃え: 間のスペース;
}
ウル {
  ディスプレイ: フレックス;
  整列項目: 中央;
  マージンブロック開始: 0;
  マージンブロック終了: 0;
  パディングインライン開始: 0;
  フレックス方向: 列;
}
{
  テキスト装飾: なし。
  ディスプレイ: フレックス;
  整列項目: 中央;
  色: 白;
}
a:ホバー{
  色: 白;
}
リ {
  リストスタイルタイプ: なし;
  パディング: 10px 0px;
  幅: 100%;
}
.page-link .active、
.router-link-active {
  背景色: 緑;
  色: ホワイト!重要;
  境界線の色: !重要を継承します。
}
.サブアクティブ {
  背景色: 黄色 !重要;
  色: ホワイト!重要;
  境界線の色: !重要を継承します。
}
.items {
  パディング: 10px 20px;
}
.sub-items {
  パディング: 10px 0px 10px 40px;
}

  

    

      

        

          
            
              {{ リンク.テキスト }}
            
          
          

            

              
                
                  {{ リンク.テキスト }}