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

Posted 2023-03-16

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

【英文标题】：VueJS getting TypeError: Cannot read properties of undefined when I delete and add an Sensor information

【发布时间】：2021-11-19 10:09:34

【问题描述】：

我正在尝试在我的 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 中有很多元素，我没有创建专用元素并尝试根据用户点击动态创建所有内容。有人可以告诉我如何解决这个问题吗？

【问题讨论】：

您可以使用.prevent 修饰符，如下所示：vuejs.org/v2/api/#v-on 您也可能在这种情况下：vuejs.org/v2/guide/reactivity.html#For-Arrays 删除后您是否检查了您的 Vue 开发工具中的内容？跨度>

@kissu 感谢您的回复。你的意思是event.preventDefault() 对吗？如果是这样，那么我已经在使用它并且仍然出现错误。你能给我一些建议吗？

这里只推荐了一个小改进。它不会解决其他问题。你检查过你的 Vue 开发工具吗？删除后的当前状态是什么？

@kissu 在删除操作之后，我的sensorArray 变为sensorArray:Array[0] 和sensorID:1，所以基本上在delete 操作期间添加的元素已被删除。现在，当我尝试再次添加时，我得到了错误。

问题到底出在哪里？是this.sensorID++ 还是this.sensorArray.push(sensor)？也许在这里试试this.sensorID += 1。否则，我想minimal reproducible example 在这里可能会有所帮助！

【参考方案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 永远不会设置。

【讨论】：

非常感谢您的回复。我尝试了这里提到的解决方案。它将删除添加的sensorInfo，但是当我再次单击Add sensor 时，我得到了同样的错误：client.js:227 TypeError: Cannot read properties of undefined (reading 'value')。它没有按预期工作。你能建议如何解决它吗？

我尝试了很多由于splice 方法而没有发生的事情，因为在执行操作后，我的sensorArray 为空，但是当我再次单击Add Sensor 时，我得到了错误所以我相信它不会因为Delete 而发生。你能建议我一些解决方法吗？

@BATMAN_2008 我已经编辑了答案。

非常感谢您的时间和回复。您的最新建议和修复对我有用。接受答案并证明赞成票。再次感谢。祝你有美好的一天:)

【参考方案2】：

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

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

【讨论】：

感谢您的回复，但这并没有从我的sensorArray 中删除该元素。你能建议如何从数组中删除元素并避免错误client.js:227 TypeError: Cannot read properties of undefined (reading 'value')

我尝试了很多由于splice 方法而没有发生的事情，因为在执行操作后，我的sensorArray 为空，但是当我再次单击Add Sensor 时，我得到了错误所以我相信它不会因为Delete 而发生。你能建议我一些解决方法吗？