VueJS 获取 TypeError：删除和添加传感器信息时无法读取未定义的属性

Question

我正在尝试在我的 VueJS 应用程序中动态创建 sensorArray。为此，当我创建一个元素并删除它，然后当我尝试创建一个新元素时，我收到以下错误：

client.js:227 TypeError: Cannot read properties of undefined (reading 'value')
    at eval (templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./pages/Test.vue?vue&type=template&id=cde3d4aa&:44)
    at Proxy.renderList (vue.runtime.esm.js:2643)

以下是我拥有的简单 Vuejs 应用程序：

<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;
        <input v-model="sensorArray[sensor.ID].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 = {}
      sensor.ID = this.sensorID
      this.sensorArray.push(sensor)
      this.sensorID++
    },
    deleteSensorInfo (event, sensorID) {
      event.preventDefault()
      this.sensorArray.splice(this.sensorArray.filter(obj => obj.ID === sensorID), 1)
    }
  }
}
</script>

1. 单击Add Sensor 按钮：将出现一个文本字段和删除按钮。
2. 点击Delete ICON并删除该字段。
3. 现在再次点击Add Sensor，然后出现以下错误：

client.js:227 TypeError: Cannot read properties of undefined (reading 'value')

由于我的SensorArray 中有很多元素，我没有创建专用元素并尝试根据用户点击动态创建所有内容。有人可以告诉我如何解决这个问题吗？

Answer 1

第一个错误

这不是一个有效的 JavaScript 操作

this.sensorArray.splice(this.sensorArray.filter(obj => obj.ID === sensorID), 1)

Splice signature 期望在第一个位置有一个数字

splice(start: number, deleteCount: number)

Filter signature 返回一个数组。

解决方案

const idx = this.sensorArray.findIndex(obj => obj.ID === sensorID);
if (idx !== -1) {
    this.sensorArray.splice(idx, 1)
}

或者如前所述，您可以使用更简洁的形式

this.sensorArray = this.sensorArray.filter(obj => obj.ID === sensorID);

第二个错误

现在我注意到您正在执行一个奇怪的数组访问。数组由id 而非您的自定义sensor.ID 索引，因此sensorArray[sensor.ID].value 没有任何意义。它在纯偶然删除之前有效（由于您生成 ID 的方式）。

这应该是你的代码（注意v-model="sensor.value"）：

<div v-for="sensor in sensorArray" :key="sensor.ID" class="form-group">
    <label class="form-label">Value</label>&nbsp;&nbsp;
    <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>

此外，.value 永远不会设置。

Answer 2

您混淆了splice 和filter，以删除该项目。 只需使用filter。

this.sensorArray = this.sensorArray.filter(obj => obj.ID === sensorID);