Vue中如何将对象数组转为id列表？正确使用计算属性与侦听器

我需要把对象数组：

[
  {
    "id": 1
  },
  {
    "id": 2
  }
]

转换成纯ID列表：

[1, 2]

我写了以下代码，但最终得到的还是对象数组，不是目标ID列表，请问该怎么调整计算属性和侦听器的用法？

我的代码：

<template>
  <div v-for="(user, index) in users" :key="index">
    <approvers
      v-model="users[index].id"
      :users="users"
      :index="index"
      :ref="`option-${index}`"
    />

    {{ users }}
  </div>
</template>

<script>
export default {
  data() {
    users: null,
    rule: {
      users: null
  },
  computed: {
    approvers() {
      return this.users.map(({ id }) => id);
    },
  },
  watch: {
    approvers() {
      this.users = this.approvers;
    },
  },
}
</script>

问题分析与解决方案 #

你的代码核心问题是数据流向逻辑错误：用原始对象数组users生成计算属性approvers，又反向把users替换成approvers的纯ID数组，这会破坏原始数据结构，同时导致后续map操作报错。以下是两种场景下的正确实现：

场景1：仅需提取ID列表作为展示/使用值 #

直接用计算属性衍生结果即可，不需要侦听器：

<template>
  <div v-for="(user, index) in users" :key="index">
    <approvers
      v-model="users[index].id"
      :users="users"
      :index="index"
      :ref="`option-${index}`"
    />
  </div>
  <!-- 直接使用计算属性的ID列表 -->
  <div>最终ID列表：{{ approvers }}</div>
</template>

<script>
export default {
  data() {
    // 注意：data必须是返回对象的函数，原始代码遗漏return
    return {
      users: [{ id: 1 }, { id: 2 }],
      rule: {
        users: null
      }
    }
  },
  computed: {
    approvers() {
      // 处理users为null的边界情况，避免报错
      return this.users ? this.users.map(item => item.id) : [];
    }
  }
  // 无需watch：计算属性会自动跟随users的变化更新
}
</script>

场景2：需要将ID列表同步到其他变量（如rule.users） #

如果要把ID列表同步到rule.users，应该监听原始数据users的变化，而非计算属性：

<template>
  <div v-for="(user, index) in users" :key="index">
    <approvers
      v-model="users[index].id"
      :users="users"
      :index="index"
      :ref="`option-${index}`"
    />
  </div>
  <div>同步后的ID列表：{{ rule.users }}</div>
</template>

<script>
export default {
  data() {
    return {
      users: [{ id: 1 }, { id: 2 }],
      rule: {
        users: []
      }
    }
  },
  watch: {
    // 开启深度监听，因为要检测数组内部对象的id变化
    users: {
      deep: true,
      handler() {
        this.rule.users = this.users.map(item => item.id);
      }
    }
  },
  // 初始化时手动同步一次
  mounted() {
    this.rule.users = this.users.map(item => item.id);
  }
}
</script>

关键注意事项 #

• data选项必须是返回对象的函数，原始代码遗漏return会导致数据初始化失败。
• 计算属性是衍生值，仅用于基于原始数据生成新值，不需要反向修改原始数据。
• 监听数组内部对象的变化时，必须开启deep: true，否则对象属性更新不会触发侦听器。

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