【Vue】switch文でメソッド切り分け。ボタン毎に処理を変える方法。

switch文を使うことで効果的に処理を切り替えることができる。

v-forでボタンを作成し、押されたボタン毎に処理を切り替えてみる。

完成イメージ

AAA〜DDDまで４つのボタンを準備して、押されたボタン毎に下に表示されるメッセージを切り替える。

↓ AAAをクリックした場合

作成手順

1. ボタンの作成
2. switch文で振り分け
3. 各メソッドの作成

1. ボタンの作成

ボタンの要素が入った配列からv-forでユニークなボタンを作成する。

ボタン要素

<script>
export default {
  data(){
    return{
      btns:[
        {
        cmd: 'methodA',
        text: "aaa",
        },
        {
        cmd: 'methodB',
        text: "bbb",
        },
        {
        cmd: 'methodC',
        text: "ccc",
        },
        {
        cmd: 'methodD',
        text: "ddd",
        },
      ],
      message: "not clicked"
    }
  },
}

上記の配列をボタン要素として一つづつ取り出す。

ボタンの作成(v-for)

<template>
  <div>
      <v-btn v-for="btn in btns" 
        :key="btn.id"
        @click="btnClicked(btn)">
        {{btn.text}}
      </v-btn>
      <p>{{message}}</p>
  </div>
</template>

・:key="btn.id"
v-forを使う場合,、:keyを設定しないとエラーが発生するため任意のユニークな値を設定。（使わない）

・click="btnClicked(btn)
btnClickedメソッドを実行する。後ほど作成。

・{{btn.text}}
配列btnsの中のtextをボタン名として表示する。

以上で部品の作成は完成。

## 2. switch文で振り分け ボタンクリックで、btnClickedメソッドを実行。引数で渡されたデータ毎にメソッドを振り分ける。

switch文の書き方

switch(引数){
  case '値1':
    処理
    break
  case '値2':
    処理
    break
  case '値3':
    処理
    break
  ・
  ・
  ・
  default:
    処理
}

switch文は、case '値'とし、渡された引数が値と一致した場合に、そこに記述した処理を実行する。

defaultはどのcaseにも当てはまらなかった場合の処理になる。

▼実例
methodsプロパティの中に記述する。

switch

methods:{
    btnClicked(command){
      switch(command.cmd){
        case 'methodA':
          this.methodA()
          break
        case 'methodB':
          this.methodB()
          break
        default:
          this.methodOthers()
      }
    }
}

・switch(command.cmd)
btnClickedの引数で渡されたcommandのcmdプロパティの値を引数にする。

     case 'methodA':
          this.methodA()
          break

command.cmdの値が「methodA」の場合は、methodA()を実行する。

        default:
          this.methodOthers()

command.cmdがmethodA, methodBのいづれにも該当しない場合は、methodOthers()を実行する。

## 3. 各メソッドの作成

switch文で振り分けた処理を作成する。こちらもmethodsプロパティの中に記述する。

メソッド

methods:{

    //省略

    methodA(){
      this.message = "AisClicked"
    },
    methodB(){
      this.message = "BisClicked"
    },
    methodOthers(){
      this.message = "othersClicked"
    }
  }

・this.message = "AisClicked"
dataで定義した変数messageに「AisClicked」を代入する。他も同様。

以上で記述完了。

## フルコード

<template>
  <div>
      <v-btn v-for="btn in btns" 
        :key="btn.id"
        @click="btnClicked(btn)">
        {{btn.text}}
      </v-btn>
      <p>{{message}}</p>
  </div>
</template>

<script>
export default {
  data(){
    return{
      btns:[
        {
        cmd: 'methodA',
        text: "aaa",
        },
        {
        cmd: 'methodB',
        text: "bbb",
        },
        {
        cmd: 'methodC',
        text: "ccc",
        },
        {
        cmd: 'methodD',
        text: "ddd",
        },
      ],
      message: "not clicked"
    }
  },
  methods:{
    btnClicked(command){
      switch(command.cmd){
        case 'methodA':
          console.log('Aclicked')
          this.methodA()
          break
        case 'methodB':
          console.log('Bclicked')
          this.methodB()
          break
        default:
          this.methodOthers()
      }
    },
    methodA(){
      this.message = "AisClicked"
    },
    methodB(){
      this.message = "BisClicked"
    },
    methodOthers(){
      this.message = "othersClicked"
    }
  }
}
</script>

v-forで作成したボタン毎に処理を分ける場合はswitch文が便利。