Vue.js如何根据subdescription字段值触发三个对应方法

提供两种可选实现方式，优先推荐第二种，可读性和可维护性更强。

方案1：直接扩展模板内的三元表达式 #

直接修改原有v-on:click的判断逻辑，嵌套一层三元判断即可：

<div class="card" v-on:click="choc.subdescription==='Video'?handleTileClick():choc.subdescription==='Poster'?myClicky():myClick2()"></div>

方案2：封装统一的点击调度方法（推荐） #

把分支判断逻辑收拢到方法里，后续调整逻辑不需要修改模板代码，可扩展性更高。

第一步：新增调度方法到Vue实例的methods中 #

new Vue({
  el: "#app",
  data: {
   chocs:[]
  },
  methods: {
    handleTileClick: function(){
      alert("test");
    },
    myClick2: function(){
      alert("test2");
    },
    myClicky: function(){
      alert("tested");
    },
    // 新增统一调度方法
    handleCardClick: function(subdesc) {
      switch(subdesc) {
        case 'Video':
          this.handleTileClick()
          break
        case 'Poster':
          this.myClicky()
          break
        default:
          this.myClick2()
      }
    }
  }
})

第二步：修改模板调用逻辑 #

<div class="card" v-on:click="handleCardClick(choc.subdescription)"></div>

内容的提问来源于stack exchange，提问作者Vzupo