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

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

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


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/0a07bfbd-7252-f2eb-bbca-0f6e3d987e27.png)

↓ AAAをクリックした場合

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/5c7e2884-80b7-ffdd-ad3f-77302c379f64.png)



##作成手順

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

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


```js:ボタン要素
<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"
    }
  },
}
```

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

```vue:ボタンの作成(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をボタン名として表示する。


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


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/c027e311-7af4-0d5e-dab8-2e14564ca84a.png)



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

```js:switch文の書き方
switch(引数){
  case '値1':
    処理
    break
  case '値2':
    処理
    break
  case '値3':
    処理
    break
  ・
  ・
  ・
  default:
    処理
}
```

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

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

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

```js: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プロパティの値を引数にする。


```js:
     case 'methodA':
          this.methodA()
          break
```

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


```js:
        default:
          this.methodOthers()
```

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



<br>
##3. 各メソッドの作成

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

```js:メソッド
methods:{

    //省略

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

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


以上で記述完了。


<br>
##フルコード

```vue:
<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>
```

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