Vue.js 2中如何修改v-for列表中单个项的样式类？

核心问题与思路 #

你当前的问题根源是使用了全局的selection变量，所有列表项共享同一个状态，导致修改任意下拉框时全部项的样式都变化。要实现单个项独立控制，需要为每个列表项维护专属的选择状态，同时不修改原player对象——可以新增一个独立对象来存储每个项的自定义选择。

具体修改步骤 #

1. 添加独立状态存储 #

在Vue实例的data中新增customSelections对象，用于保存每个列表项的自定义选择：

data() {
  return {
    // 保留你原有的其他变量
    customSelections: {} // 键为列表项的index，值为对应的选择值
  }
}

2. 修改模板绑定逻辑 #

把全局selection替换为针对每个index的customSelections[index]，同时修正下拉框的v-model绑定（v-model应绑定在<select>标签上，而非<option>）：

<div id="displayAvailability" v-for="(value, key, index) in player" :key="index">
  <div 
    :id="'listItem'+index+1" 
    :class="getItemClass(index, value)"
    :key="index"
  >
    <select 
      id="availabilityOptions" 
      v-model="customSelections[index]"
    >
      <option :value="value">{{value}}</option>
      <option value="Available">Available</option>
      <option value="Busy">Busy</option>
      <option value="Tentative">Tentative</option>
      <option value="Session">Session</option>
    </select>
  </div>
</div>

3. 优化类名计算逻辑 #

将原模板中复杂的类名判断提取到methods中，让代码更清晰，同时统一处理大小写差异（原player中的值是小写，下拉选项是大写开头）：

methods: {
  getItemClass(index, defaultValue) {
    // 优先取自定义选择，没有则用默认值
    const selected = this.customSelections[index] || defaultValue;
    const normalized = selected.toLowerCase();
    return {
      available: normalized === 'available',
      tentative: normalized === 'tentative',
      busy: normalized === 'busy',
      session: normalized === 'session',
      unknown: normalized === 'unknown'
    };
  }
}

4. 移除冗余方法 #

原有的updateColour方法已不再需要，直接删除即可——v-model会自动同步customSelections的状态。

解决你之前尝试的问题 #

• 颜色不变化：修正了绑定逻辑错误，通过customSelections[index]获取当前项的独立选择，同时统一大小写确保类名匹配正确。
• 新增玩家清空修改：customSelections是独立于player的存储对象，新增玩家时不会覆盖已有的自定义选择。

额外提示 #

• 如果player数组中的对象有唯一标识（比如id），建议用该标识作为:key的值，而非index，避免数组变动时出现渲染异常。
• 若后续需要保存所有自定义选择，直接读取customSelections对象即可，不会影响原player数据。

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