Vue 3点击Span元素添加类失效：多选场景功能异常求助

你的代码存在核心语法问题，导致多选功能异常，以下是修复方案：

问题分析 #

1. 事件处理方法addTime和状态判断方法isActive未放置在Vue组件的methods选项中，Vue无法正确绑定调用这些方法。
2. data()选项后缺少逗号，破坏了组件选项的对象结构，导致代码解析失败。

修复后完整代码 #

<template>
  <div v-for="(item, index) in listTimes" :key="item">
    <span class="choice__text checkbox__text choice-popup__text"
          @click="addTime(item)"
          :class="{'active': isActive(item) }">
      {{ item }}
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listTimes: ['8:00', '9:00', '10:00', '11:00', "12:00", "13:00", "14:00", "15:00","16:00", "17:00"],
      selectTimes: [],
    }
  },
  methods: {
    addTime(item) {
      const index = this.selectTimes.indexOf(item);
      index > -1 ? this.selectTimes.splice(index, 1) : this.selectTimes.push(item);
    },
    isActive(item) {
      return this.selectTimes.includes(item);
    }
  }
}
</script>

额外优化说明 #

• 将v-for的key从index改为item（因时间值唯一），提升列表渲染的性能与准确性，避免DOM复用异常。
• 简化addTime的判断逻辑，用三元表达式替代冗余的条件分支，代码更简洁。

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