medium-code_object-array-type-2.vue

<template>
  <div v-for="(item, index) in valueSync" :key="item.id">
    name: <input type="text" v-model="item.name" @input="syncPropValue"> <!-- add event -->
    years: <input type="number" v-model="item.years" @input="syncPropValue"> <!-- add event -->
    <button @click="removePepole(index)">remove</button>
  </div>
</template>

<script>
export default {
  //...
  data() {
    return {
      valueSync: this.value 
    }
  },
  medthods: {
    removePepole(index) {
      this.valueSync.splice(index, 1)
      this.syncPropValue()
    },
    
    // 讓 valueSync 觸發事件同步 value 傳遞到父組件 
    syncPropValue(value) {
      this.$emit('input', this.valueSync)
    },
  },
}
</script>