VueJS getting TypeError: Cannot read properties of undefined when I delete and add an Sensor information

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>

单击 Add Sensor 按钮：将出现一个文本字段和删除按钮。
单击 Delete ICON 并删除字段。
现在再次点击 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 returns 一个数组。

解决方案

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);

VueJS getting TypeError: Cannot read properties of undefined when I delete and add an Sensor information

VueJS getting TypeError: Cannot read properties of undefined when I delete and add an Sensor information

javascript

vue.js

nuxt.js

undefined

typeerror

第一个错误

解决方案

第二个错误