Vue中v-bind:class与带参methods问题：列表项选中点击不生效

我来帮你拆解下问题出在哪，以及怎么快速修复：

核心问题根源 #

1. 数组使用逻辑错误：你用selectedPoll数组存储选中状态，但却用poll.name（字符串）当索引。在JavaScript里，数组的索引本质是数字，用字符串当索引其实是给数组加了额外属性，Vue的响应式系统根本追踪不到这类变化，所以修改后视图不会更新。
2. isActive方法的重置bug：每次调用isActive时，只要id不在数组里就会初始化selectedPoll[id] = { isChecked: false }，这会把你点击设置的isChecked: true反复重置，状态永远无法保持。
3. 缺少选中切换逻辑：当前onSelect只把状态设为true，没有处理取消选中的情况，不符合常规的列表项交互逻辑。

修复步骤&代码 #

1. 把selectedPoll从数组改为对象 #

对象更适合用poll.name作为键来存储选中状态，Vue能完美追踪对象属性的变化。

2. 重构方法逻辑 #

简化isActive的判断逻辑，给onSelect加上切换选中状态的功能。

修改后的完整代码：

<template>
  <div class="poll-widget">
    <h2>Poll list</h2>
    <div class="poll-list">
      <div 
        class="poll-list-item" 
        :class="{'active': isActive(poll.name)}" 
        @click="onSelect(poll.name)" 
        v-for="poll in pollList" 
        :key="poll.id"
      >
        {{ poll.name }}
      </div>
    </div>
    <div class="poll-btn-block">
      <div class="poll-btn">Send</div>
      <div class="poll-btn">Results</div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Poll",
  data: () => {
    // 改为对象存储，键为poll名称，值为布尔选中状态
    return { selectedPoll: {} };
  },
  methods: {
    onSelect(name) {
      // Vue2中用$set确保新增属性的响应式，Vue3可直接赋值
      this.$set(this.selectedPoll, name, !this.selectedPoll[name]);
      console.log(this.selectedPoll);
    },
    isActive(name) {
      // 不存在则默认返回false，避免重置已有状态
      return this.selectedPoll[name] || false;
    }
  },
  mounted() {
    this.$store.dispatch("loadPolls");
  },
  computed: {
    ...mapState(["pollList"])
  }
};
</script>

关键修改说明 #

• 对象替代数组：用poll.name作为对象键直接存储布尔值，结构更清晰，Vue能正确响应属性变化。
• 切换选中逻辑：点击时自动切换选中状态，符合用户预期的交互。
• 简化状态判断：isActive直接返回对应状态，避免了之前反复初始化的bug。

这样修改后，点击列表项就能正确切换选中状态，视图也会同步更新啦！

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