Vue.js : Unexpected mutation of "quantity" prop

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,

Obviously some code missing like the parent component of the MenuItem that passes the props. If you have your project repository in GitHub, and the project is not large and complex, import it into CodeSandbox and post the link here in order to make it easier for others to analyze. — Tim, Aug 13 '21 at 14:55
You are using a prop as the value in a v-model which will try to edit it, which isn't allowed. You should assign the value of the prop to a variable in `data` first, then use that 'copy'. — match, Aug 13 '21 at 18:28

score 0 · Answer 1 · answered Aug 13 '21 at 18:50

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" />

score 0 · Answer 2 · answered Oct 22 '22 at 18:48

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']

score 0 · Answer 3 · answered Jul 05 '23 at 09:22

0

Might not be the best way, but I resolved this by updating nuxt.config.js file by adding below;

{
...
  "vue/no-mutating-props": ["error", {
    "shallowOnly": false
  }]
...
}

Reference: https://eslint.vuejs.org/rules/no-mutating-props.html#options

answered Jul 05 '23 at 09:22

sulaiman sudirman

1,826
1
24
32

Vue.js : Unexpected mutation of "quantity" prop

3 Answers3