Recibo los siguientes errores cuando uso la función removeData en el siguiente código.
Error de expresión alpina: no se pueden leer las propiedades de undefined (leyendo 'nombre')
Expresión: "datos[id].nombre"
<input x-model="data[id].name" type="text" name="name"></input>
Error de expresión alpina: no se pueden leer las propiedades de undefined (leyendo 'texto')
Expresión: "datos[id].texto"
<input x-model="data[id].text" type="text" name="text"></input>
Todo parece funcionar correctamente pero el mensaje de error se genera en la consola. ¿Hay alguna manera de evitar que esto suceda?
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>Si corrige lo siguiente, encontrará la causa.
this.data[n + 1] = { //+ 'name': `${n+1}taro`, 'text': `${n+1}taro san shibakariheitta` } }, //+ <pre x-text="JSON.stringify(data, null, 2)"></pre>¿Qué tal lo siguiente como solución?
//+ <input x-model="value.name" type="text" name="name"> <input x-model="value.text" type="text" name="text">