vueでたまに使うトグルスイッチ

備忘のため

コンテンツの開閉を複数設置する場合、戸惑う時があるので備忘として残しています。
「@click=""」、「v-show=""」、「dispay:block,none」で表示、非表示切り替える。
「is-open」で開閉の矢印アイコンを上下反転させる。

<templet>
 <!-- １つ目のトグルスイッチ-->
  <div　class="toggle__area"
　  :class="{ 'is-open': first }"
   @click="openToggleSwitch('first')"
  >
 </div>
 <div v-show="first">
 　<p>表示されるコンテンツ</p>
 </div>
 <!-- ２つ目のトグルスイッチ-->
 <div　class="toggle__area"
　 :class="{ 'is-open': second }"
  @click="openToggleSwitch('second')"
 >
 </div>
 <div v-show="second">
  <p>表示されるコンテンツ</p>
 </div>
</templet>

<script lang="ts">
data() {
 firstSwitch: false,
 secondSwitch: false
}

methods: {
 onToggleSwitch(switch: 'first' | 'second') {
  if(switch === 'first') {
   this.firstSwitch = !this.firstSwitch
  }else if(switch === 'second') {
   this.secondSwitch = !this.secondSwitch
  }else {
   this.firstSwitch == false
   this.secondSwitch == false
  }
 }
}
</script>

<style lang="scss" scoped>
.toggle
&__area {
  position: relative;
  padding: 0.5rem 1rem;
  background: #b39782;
 
  &::after {
    position: absolute;
    top: 40%;
    right: 10px;
    width: 10px;
    height: 10px;
    margin-top: -4px;
    content: '';
    border: 0;
    border-top: solid 2px #ded0c5;
    border-right: solid 2px #ded0c5;
    transform: rotate(136deg);
  }

  &.is-open {
    &::after {
      top: 50%;
      transform: rotate(315deg);
    }
  }
}
</style>

初期値

開く、閉じるのプロパティを初期値falseで設定。

data() {
 firstSwitch: false,
 secondSwitch: false
}

メソッド

変数switchに「ユニオン型」で文字列を宣言。
参考：ユニオン型 (union type)

 // (switch: string)でも大丈夫。
 openToggleSwitch(switch: 'first' | 'second')

あとは、文字列があるかないかで分岐する。

  // １つ目のアコーディオンスイッチで'first'があった場合true→false, false→trueにする
  if(switch === 'first') {
   this.firstSwitch = !this.firstSwitch
  }
  // 2つ目のアコーディオンスイッチがあった場合一つ目と同じでtrue→false, false→trueにする
  else if(switch === 'second') {
   this.secondSwitch = !this.secondSwitch
  }
  //それ以外はfalseで閉じた状態にしておく
  else {
   this.firstSwitch == false
   this.secondSwitch == false
  }

htmlとcss

デフォルトは「firstSwitch,secondSwitch」がfalseの状態なので、閉じている状態。
開いた状態をデフォルトにする場合は、「firstSwitch:true」に
矢印の向きも下の状態。

 <div　class="first__block">
  <div　class="toggle__area"
　  :class="{ 'is-open': first }"
   @click="openToggleSwitch('first')"
  > </div>
 <div v-show="firstSwitch">
 　<p>表示されるコンテンツ</p>
 </div>
 
 <style lang="scss" scoped>
.toggle
&__area {
  position: relative;
  padding: 0.5rem 1rem;
  background: #b39782;
 
  // 矢印が下向きの状態が初期状態
  &::after {
    position: absolute;
    top: 40%;
    right: 10px;
    width: 10px;
    height: 10px;
    margin-top: -4px;
    content: '';
    border: 0;
    border-top: solid 2px #ded0c5;
    border-right: solid 2px #ded0c5;
    transform: rotate(136deg);
  }

　　　// 矢印が上向きの状態
  &.is-open {
    &::after {
      top: 50%;
      transform: rotate(315deg);
    }
  }
}
</style>