Estoy armando un componente secundario que devolverá los datos a su elemento principal cada vez que se haga clic en uno de los botones de incremento. Pero v-model no está actualizando la función de datos. Aunque el valor del campo de entrada de número está cambiando, el valor de kf_units_leaking permanece igual.
<template> <div> <input @click=" decrementValue($event) sendChildData(kfData) " type="button" value="-" class="btn button-minus border icon-shape icon-sm lh-0 bg-dark text-light" data-field="quantity" /> <input id="kfUnitsLeaking" type="number" step="1" v-model="kfData.kf_units_leaking" name="quantity" class="form-control quantity-field border-0 text-center w-25" /> <input @click=" incrementValue($event) sendChildData(kfData) " type="button" value="+" class="btn button-plus border icon-shape icon-sm lh-0 bg-dark text-light" data-field="quantity" /> </div> </template> <script> export default { name: 'audittedKitchenFaucets', props: { sendChildData: { type: Function, }, incrementValue: { type: Function, }, decrementValue: { type: Function, }, }, data() { return { kfData: { kf_units_leaking: 0, }, } }, } </script>Este es un problema con la reactividad en vue.js. necesita usar $set para actualizar objetos según la clave y la matriz según su índice. Puede encontrar más información aquí: https://v2.vuejs.org/v2/api/#vm-set
EDITAR
Este problema de reactividad se solucionó en la versión 3 de Vue y puede pasar directamente la clave del objeto al modelo v como este ejemplo de trabajo: https://playcode.io/943725/
En primer lugar, este código no funcionará y provocará un error de sintaxis.
@click=" decrementValue($event) sendChildData(kfData) " Debe separar las funciones con un punto y coma ;
@click=" decrementValue($event); sendChildData(kfData) "