Vueでcase文

仕事で使った、Vueのcase文の復習をしてみました。

<template>
  <div>
    <button v-for="btn in btns"
      :key="btn.id"
      @click="btnClicked(btn)">
      {{btn.text}}
    </button>
    <p>{{message}}</p>
  </div>
</template>
<script>
export default{
  data(){
    return{
      btns:[
        {
          cmd:'methodA',
          text:'btnA'
        },
        {
          cmd:'methodB',
          text:'btnB'
        }
      ],
        message:"not clicked"
    }
  },
  methods:{
    btnClicked(command){
      switch(command.cmd){
        case 'methodA':
          this.methodA()
          break
        case 'methodB':
          this.methodB()
          break
        default:
          this.methodOthers()
      }
    },
    methodA(){
      this.message = "This is A"
    },
    methodB(){
      this.message = "This is B"
      alert("Bだよ!")
    },
    methodOthers(){
      this.message = "othersClicked"
    }
  }
}
</script>

実行結果はこちらです。

ボタンをクリック後はこうなります。