Vue中按值操作数组：实现对象列表选中状态的添加/移除功能

嘿，我完全懂你的困扰！因为用户选中项的顺序和原options数组的顺序不一定一致，靠索引splice确实没法精准移除目标项——毕竟你不知道那个title在选中数组里的位置对吧？别慌，咱们换个思路，直接根据title（或者唯一标识）来做判断和操作就搞定了！

第一步：完善你的数据结构 #

首先，你需要一个数组来存储已经选中的title，在data里加一个selectedTitles：

data () {
  return {
    options: [
      { title: "pie", isSelected: false },
      { title: "cupcakes", isSelected: false },
      { title: "muffins", isSelected: false }
    ],
    selectedTitles: [] // 用来存选中的title
  }
}

第二步：写切换逻辑函数 #

接下来写一个toggleSelection函数，核心思路是先判断当前项是否已选中，再决定是添加还是移除：

methods: {
  toggleSelection(item) {
    // 检查当前item的title是否在选中数组里
    const isSelected = this.selectedTitles.includes(item.title);

    if (isSelected) {
      // 移除：用filter过滤掉当前title，返回新数组替换原数组
      this.selectedTitles = this.selectedTitles.filter(title => title !== item.title);
      // 同步更新options里的选中状态
      item.isSelected = false;
    } else {
      // 添加：把title推入数组，同时标记选中状态
      this.selectedTitles.push(item.title);
      item.isSelected = true;
    }
  }
}

第三步：绑定到视图上 #

在模板里给每个选项绑定点击事件，还可以根据isSelected给选中项加样式：

<template>
  <div class="options-container">
    <div 
      v-for="(option, index) in options" 
      :key="index"
      @click="toggleSelection(option)"
      :class="{ 'selected-item': option.isSelected }"
    >
      {{ option.title }}
    </div>
    
    <!-- 可选：显示当前选中的项，方便调试和用户查看 -->
    <div class="selected-list">
      已选中：{{ selectedTitles.join(', ') }}
    </div>
  </div>
</template>

<style scoped>
.selected-item {
  background-color: #e6f7ff;
  padding: 8px;
  margin: 4px;
  border-radius: 4px;
  cursor: pointer;
}
.options-container {
  margin: 16px;
}
.selected-list {
  margin-top: 16px;
  padding: 8px;
  border: 1px solid #eee;
  border-radius: 4px;
}
</style>

额外优化：如果title可能重复怎么办？ #

如果你的options里存在相同title的项，那用title判断就不准确了。这时候建议给每个对象加一个唯一id，用id来做判断：

// 修改options数组
options: [
  { id: 1, title: "pie", isSelected: false },
  { id: 2, title: "cupcakes", isSelected: false },
  { id: 3, title: "pie", isSelected: false } // 相同title，不同id
],
// 切换函数调整为用id判断
toggleSelection(item) {
  const isSelected = this.selectedTitles.some(selectedId => selectedId === item.id);
  
  if (isSelected) {
    this.selectedTitles = this.selectedTitles.filter(id => id !== item.id);
    item.isSelected = false;
  } else {
    this.selectedTitles.push(item.id);
    item.isSelected = true;
  }
}

这个方法的好处是完全不用关心选中项的顺序，不管用户点的顺序是什么，都能精准添加或移除目标项，完美解决你的问题！

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