Tengo una matriz de productos vacía y los usuarios pueden agregar nuevos productos si lo desean. Mi objetivo es guardar la última productKey de producto y guardarla en un estado Vuex.
//data products: [] //method addNewProduct() { this.products.push({ productKey: '', productName: '' }) },Quiero obtener la clave del último producto agregado (último objeto). lo he intentado de esta manera
lastKey() { return this.products[this.products.length-1].productKey } Esto no funciona porque dice cannot read properties of undefined (reading 'productKey') . Cualquier ayuda sería muy apreciada. gracias.
Todo lo relacionado con el estado (incluidas las propiedades computed ) se ejecuta antes de que se created el enlace. Debido a que los productos están inicialmente vacíos, por lo que intenta acceder a productKey del último elemento, cannot read properties of undefined (reading 'productKey') . Puede usar el encadenamiento opcional para comprobar que existe la posibilidad.
lastKey() { return this.products[this.products.length-1]?.productKey }Como productos, hay una matriz empty dentro del objeto de datos y usted está asignando los datos en él más adelante mediante el uso de methods mounted() o.
Inicialmente, la propiedad computed siempre se ejecuta antes del enlace del ciclo de vida mounted para crear la propiedad y, en ese momento, los productos son una matriz vacía. Por lo tanto, cannot read properties of undefined (reading 'productKey') .
Para deshacerse de este error, puede usar el encadenamiento opcional (?.) que le permite leer el valor de una propiedad ubicada en lo profundo de una cadena de objetos conectados sin tener que verificar que cada referencia en la cadena sea válida.
demostración en vivo :
new Vue({ el: '#app', data: { products: [] }, mounted() { console.log('mounted call'); // This calls this.products.push({ productKey: 'key1', productName: 'name1' }) }, computed: { lastKey: function() { console.log('computed call'); // This calls before mounted life cycle hook to create the lastKey property and it will call again after mounted() as there is a change in the products array. return this.products[this.products.length - 1]?.productKey; } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <p>{{ lastKey }}</p> </div>Creo que tu código ya es correcto. esto sucedió porque la matriz de productos está vacía