I'm putting together a child component that will pass data back up to its parent each time one of the increment buttons are clicked. But v-model is not updating the data function. Even though the value of the number input field is changing the value of kf_units_leaking stays the same.
<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>
This is a problem with reactivity in vue.js. you need to use $set for updating objects based on key and array based on it's index.
You can find more info here : https://v2.vuejs.org/v2/api/#vm-set
EDIT
This problem in reactivity is fixed in Vue version 3 and you can directly pass object key to v-model like this working example: https://playcode.io/943725/
First of all, this code will not work and will cause a syntax error.
@click="
decrementValue($event)
sendChildData(kfData)
"
You need to separate the functions with a semicolon ;
@click="
decrementValue($event);
sendChildData(kfData)
"