VueJS方法中条件语句失效，需实现按按钮状态触发对应操作

我看了你的代码，问题出在条件判断的字符串匹配逻辑上！你之前把选中的标签索引转换成了带单引号的字符串（比如'0'），但判断的时候却和不带引号的'0'做比较，这两个完全不相等，所以所有条件都不会触发。

最简单的修复方案：直接使用点击的索引参数 #

既然clickedTag方法已经接收了当前点击的标签索引indexTag，完全不需要绕弯处理选中的标签数组，直接用这个参数判断就好，代码更简洁高效：

clickedTag: function (indexTag) { 
  // toggle the active class 
  this.$set(this.isClickedTag, indexTag, !this.isClickedTag[indexTag]) 

  // 可选：如果你只想在标签被激活时触发操作
  if (this.isClickedTag[indexTag]) {
    switch(indexTag) {
      case 0:
        console.log('naylon')
        break
      case 1:
        console.log('espiga')
        break
      case 2:
        console.log('omega')
        break
      case 3:
        console.log('crochet')
        break
      case 4:
        console.log('thread')
        break
      case 5:
        console.log('bordado')
        break
      default:
        console.log('未知标签')
    }
  }
}

如果你需要支持多选场景（多个标签同时激活） #

如果你的需求是允许多个标签同时激活，并且每个激活的标签都要触发对应操作，可以修改你原来的代码，直接遍历选中的标签数组，不需要转换成带引号的字符串：

clickedTag: function (indexTag) { 
  // toggle the active class 
  this.$set(this.isClickedTag, indexTag, !this.isClickedTag[indexTag]) 

  // 获取所有激活的标签索引（字符串类型）
  let tagsSelected = _.keys(_.pickBy(this.isClickedTag, _.identity)) 

  // 遍历每个激活的标签，触发对应操作
  tagsSelected.forEach(tag => {
    switch(tag) {
      case '0':
        console.log('naylon')
        break
      case '1':
        console.log('espiga')
        break
      case '2':
        console.log('omega')
        break
      case '3':
        console.log('crochet')
        break
      case '4':
        console.log('thread')
        break
      case '5':
        console.log('bordado')
        break
    }
  })
}

为什么原来的代码不生效？ #

你之前的代码里，tagsSelected.map(s => '${s}').join(', ')会把索引0转换成字符串"'0'"（注意是包含单引号的），但你的判断条件是tagsSelectedSingle === '0'（不带单引号），这两个字符串完全不匹配，所以所有的if/else分支都不会被执行。

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