Vue中数组切换对象时，预存数据失去响应性的问题咨询

你遇到的核心问题是对象引用不一致：

• 初始savedEvents里的Event 2是一个独立创建的新对象，和events数组中id=2的对象不是同一个引用。
• 而Event 1和Event 3被切换到savedEvents时，是直接把events里的原对象push进去的，所以两个数组里的是同一个对象引用，修改notes时会自动同步。

这就导致Event 2的输入框修改内容无法同步到savedEvents里的对应项——因为你绑定的是events数组中对象的notes，但savedEvents里的是另一个完全独立的对象。

我们只需要确保savedEvents里的对象和events里的原对象是同一个引用即可，有两种简单的实现方式：

方式1：初始化时直接引用原对象 #

在初始化数据时，从events中找到对应id的对象，添加notes属性后再放入savedEvents：

new Vue({
  el: "#app",
  data() {
    // 先定义events数组
    const events = [
      { id: 1, text: "Event 1"},
      { id: 2, text: "Event 2"},
      { id: 3, text: "Event 3"}
    ];
    // 初始化savedEvents，引用events里的原对象
    const savedEvents = [];
    const targetEvent = events.find(e => e.id === 2);
    if (targetEvent) {
      targetEvent.notes = 'Event Notes';
      savedEvents.push(targetEvent);
    }
    return {
      events,
      savedEvents
    };
  },
  // 原methods和其他代码不变
  methods: {
    toggleEvent: function(event){
      let index = this.savedEvents.findIndex(e => e.id == event.id);
      if (index != -1) {
        this.savedEvents.splice(index, 1);
      } else {
        this.savedEvents.push(event);
      }
    },
    inArray: function(id) {
      return this.savedEvents.some(obj => obj.id == id);
    }
  }
})

方式2：在created钩子中合并引用 #

如果无法修改初始化的savedEvents结构，可以在组件创建时，把savedEvents里的对象替换成events中的原对象，同时保留已有的notes属性：

new Vue({
  el: "#app",
  data: {
    events: [
      { id: 1, text: "Event 1"},
      { id: 2, text: "Event 2"},
      { id: 3, text: "Event 3"}
    ],
    savedEvents: [
      { id: 2, text: "Event 2", notes: 'Event Notes'}
    ]
  },
  created() {
    // 遍历savedEvents，替换为events中的原对象
    this.savedEvents = this.savedEvents.map(savedEvent => {
      const originalEvent = this.events.find(e => e.id === savedEvent.id);
      if (originalEvent) {
        // 把savedEvent的属性（比如notes）合并到原对象上
        Object.assign(originalEvent, savedEvent);
        return originalEvent;
      }
      return savedEvent;
    });
  },
  // 原methods不变
  methods: {
    toggleEvent: function(event){
      let index = this.savedEvents.findIndex(e => e.id == event.id);
      if (index != -1) {
        this.savedEvents.splice(index, 1);
      } else {
        this.savedEvents.push(event);
      }
    },
    inArray: function(id) {
      return this.savedEvents.some(obj => obj.id == id);
    }
  }
})

两种方式处理后，savedEvents里的Event 2和events里的Event 2会变成同一个对象引用。此时修改输入框的内容，savedEvents列表里的notes会实时同步，和Event 1、Event 3的行为完全一致。

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