VueJS删除再新增传感器信息时报Cannot read properties of undefined错误

核心错误原因 #

• 模板绑定逻辑错误：v-for遍历得到的sensor是当前循环的元素对象，你使用sensorArray[sensor.ID]作为绑定路径是错误的。sensor.ID是全局自增的数值，和数组下标没有对应关系：比如你删除了ID为0的元素后，下一个新增的元素ID为1，此时数组长度为1，最大下标为0，sensorArray[1]读取结果为undefined，访问undefined.value就会触发你遇到的报错。
• 删除方法逻辑错误：Array.splice第一个参数要求传入待删除元素的下标，你直接传入filter方法返回的数组，splice会将其转换为NaN，无法正确删除目标元素，会导致数组结构异常。

修复后的完整代码 #

<template>
  <div>
    <span>Sensor Information : </span>
    <button class="btn btn-info" @click="addSensorInfo($event)">
      Add Sensor
    </button>
    <br>
    <span v-if="sensorArray.length > 0"><b>Sensor Element: </b></span>
    <span v-if="sensorArray.length > 0">&nbsp;&nbsp;
      <div v-for="sensor in sensorArray" :key="sensor.ID" class="form-group">
        <label class="form-label">Value</label>&nbsp;&nbsp;
        <!-- 直接绑定当前遍历到的sensor对象的value即可 -->
        <input v-model="sensor.value" type="text" class="form-control">
        <button class="btn btn-danger" @click="deleteSensorInfo($event,sensor.ID)"><i class="bi bi-trash" /></button>
      </div>
    </span>
  </div>
</template>

<script>
export default {
  data () {
    return {
      sensorID: 0,
      sensorArray: []
    }
  },
  methods: {
    addSensorInfo (event) {
      event.preventDefault()
      const sensor = {
        ID: this.sensorID,
        // 初始化value为空字符串，避免Vue2响应式问题，也可以后续动态添加其他字段
        value: ''
      }
      this.sensorArray.push(sensor)
      this.sensorID++
    },
    deleteSensorInfo (event, sensorID) {
      event.preventDefault()
      // 先查找目标元素的下标
      const targetIndex = this.sensorArray.findIndex(obj => obj.ID === sensorID)
      if (targetIndex > -1) {
        this.sensorArray.splice(targetIndex, 1)
      }
    }
  }
}
</script>

额外说明 #

如果需要动态添加更多自定义字段，不需要预先全部声明，直接给sensor对象赋值即可：如果是Vue2环境下新增未初始化的字段，需要使用this.$set(sensor, '新字段名', 字段值)保证响应式，Vue3环境下直接赋值即可。

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