错误高山表达式错误：从控制台中的键/值对中删除数据时无法读取未定义的属性

Question

在下面的代码中使用removeData 函数时收到以下错误。

Alpine 表达式错误：无法读取未定义的属性（读取“名称”）

表达式：“数据[id].name”

<input x-model="data[id].name" type="text" name="name"></input>

Alpine 表达式错误：无法读取未定义的属性（正在读取“文本”）

表达式：“数据[id].text”

<input x-model="data[id].text" type="text" name="text"></input>

一切似乎都正常工作，但在控制台中生成了错误消息。有没有办法阻止这种情况发生？

function handler() {
  return {
    data: {},
    getData() {
      console.log(this.data);
    },
    addData() {
      x = Object.keys(this.data);
      x = x.map(function(x) {
        return parseInt(x, 10);
      }).sort();
      n = x[x.length - 1];
      if (isNaN(n)) {
        n = 0;
      };
      this.data[n + 1] = {
        'name': '',
        'text': ''
      }
    },
    removeData(id) {
      delete this.data[id];
    },
  }
}

<script src="//unpkg.com/alpinejs" defer></script>

<div x-data="handler()">
  <button type="button" @click="getData()">ShowData</button>
  <button type="button" @click="addData()">AddData</button>
  <template x-for="[id, value] in Object.entries(data)" :key="id">
    <div :id="id">
      <input x-model="id" type="number">
      <input x-model="data[id].name" type="text" name="name">
      <input x-model="data[id].text" type="text" name="text">
      <button type="button" @click="removeData(id)">Remove</button>
    </div>
  </template>
</div>

Answer 1

如果你纠正以下，你会找到原因。

this.data[n + 1] = {
//+
        'name': `${n+1}taro`,
        'text': `${n+1}taro san shibakariheitta`
      }
    },

//+
  <pre x-text="JSON.stringify(data, null, 2)"></pre>

以下作为解决方案怎么样？

//+
      <input x-model="value.name" type="text" name="name">
      <input x-model="value.text" type="text" name="text">