为属性动态赋值依赖于另一个列表

<template>
  <div>
    <input v-model="item.name" placeholder="Name">
    <input v-model="item.age" placeholder="Age">
  </div>
</template>

<script>
export default {
  data() {
    return {
      externalList: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 }
      ],
      selectedItem: null
    };
  },
  computed: {
    item() {
      return this.selectedItem || {};
    }
  },
  methods: {
    selectItem(item) {
      this.selectedItem = item;
    }
  },
  mounted() {
    // 假设我们选择列表中的第一个元素
    this.selectItem(this.externalList[0]);
  }
};
</script>

watch: {
  externalList: {
    handler(newVal) {
      if (this.selectedItem && newVal.includes(this.selectedItem)) {
        // 更新内部对象的属性
        this.selectedItem = newVal.find(item => item.id === this.selectedItem.id);
      }
    },
    deep: true
  }
}