Vue.js : Unexpected mutation of "quantity" prop - vue.js

Question

I just started learning vue.js and have encountered a problem I can't solve. I made a few researches and found this stack overflow post, that is about the same problem : Vue 2 - Mutating props vue-warn. But couldn't solve it...
I tried this.$emit('update:onSale', true), but it didn't seam to work. Could you please help me?
Find below the script that is not working properly:
<script>
export default {
name: "MenuItem",
props: ["addToShoppingCart", "image", "inStock", "name", "price", "quantity"],
data() {
return {
onSale: false
}
},
computed: {
generatedPrice() {
if (this.onSale) {
return (this.price * 0.9).toFixed(2)
} else {
return this.price
}
}
},
beforeMount() {
const today = new Date().getDate()
if (today % 2 === 0) {
this.onSale = true
//this.$emit('update:onSale', true)
}
}
}
</script>
<template>
<div class="menu-item">
<img class="menu-item__image" :src="image.source" :alt="image.alt" />
<div>
<h3>{{ name }}</h3>
<p>Prix : {{ generatedPrice }}</p>
<p v-if="inStock">En stock</p>
<p v-else>En rupture de stock</p>
<div>
<label for="add-item-quantity">Quantité : {{ quantity }}</label>
<input v-model.number="quantity" id="add-item-quantity" type="number" />
<button #click="addToShoppingCart(quantity)">
Ajouter au panier
</button>
</div>
</div>
</div>
</template>
<style></style>
I thank you in advance for your help,

Answer 1

you this line is the culprit.
<input v-model.number="quantity" id="add-item-quantity" type="number" />
here, you are assigning quantity to v-model. and v-model tends to update it. Which is against the rules. i.e. a prop can only be updated by its creator component. And MenuItem is certainly not the creator.
To fix this, create a data variable:
data() {
return {
qty: this.quantity
}
}
and
<input v-model.number="qty" id="add-item-quantity" type="number" />

Answer 2

I guess your problem should be solved so far, but maybe this answer could help somebody else, so...
Have you tried this?
In your parent component file:
<MenuItem v-model.number="item.quantity" /* your other params */ />
And in your MenuItem component file:
/* Your input element */
<input :value="modelValue" #input="$emit('update:modelValue', $event.target.value)" id="add-item-quantity" type="number" />
/* In your export default */
props: [ 'addToShoppingCart', 'image', 'inStock', 'name', 'price', 'quantity', 'modelValue' ],
emits: ['update:modelValue']