vue点击选择数据合并

可以通过以下步骤实现点击选择数据合并：

1. 在Vue组件中定义一个数组selectedList，用于存储用户所选中的数据项。

2. 在模板中使用v-for指令渲染数据列表，并将每个数据项绑定一个点击事件。

3. 在点击事件中，判断所点击的数据项是否已经被选中，如果已经被选中，则从selectedList数组中移除该项；否则，将该项添加到selectedList数组中。

4. 使用computed属性计算已选中数据项的合并结果，例如使用Array.prototype.reduce()方法将所有已选中数据项合并成一个对象。

下面是一个示例代码：

<template>
  <div>
    <div v-for="item in dataList" :key="item.id" @click="toggleSelected(item)">
      {{ item.name }}
      <span v-if="isSelected(item)">[已选中]</span>
    </div>
    <div>已选中的数据：{{ selectedData }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        { id: 1, name: '数据项1' },
        { id: 2, name: '数据项2' },
        { id: 3, name: '数据项3' }
      ],
      selectedList: []
    }
  },
  methods: {
    toggleSelected(item) {
      const index = this.selectedList.findIndex(selectedItem => selectedItem.id === item.id)
      if (index >= 0) {
        this.selectedList.splice(index, 1)
      } else {
        this.selectedList.push(item)
      }
    },
    isSelected(item) {
      return this.selectedList.some(selectedItem => selectedItem.id === item.id)
    }
  },
  computed: {
    selectedData() {
      return this.selectedList.reduce((result, item) => {
        return {
          ...result,
          [item.id]: item.name
        }
      }, {})
    }
  }
}
</script>

在上面的示例代码中，我们使用了v-for指令循环渲染数据列表，并在每个数据项上绑定了toggleSelected方法来切换选择状态。isSelected方法用于判断一个数据项是否已被选中，如果是则在模板中显示一个标记。最后，我们使用computed属性计算所有已选中数据项的合并结果，并在模板中显示出来。