Styjun

Here, I have a variable called total_price which I sent from laravel. I wanna do many things to it. When I use methods, when script runs them, I get the mutating error. Here is the script:

 export default {
 props: 
 .//some other props here are cut for better reading 
 .
 .
 total_price:
 type:Number
 ,
 .
 .
 .
 ,
 data()
 return 
 newValue:7,
 total_price:1,
 
 ,

I use them in methods like this:

 methods:
 getNotificationClass (notification) 
 return `alert alert-$notification.type`
 ,
 mpminus: function () 
 if ((this.newValue) > this.min) 
 this.newValue = this.newValue - 1
 this.$emit('input', this.newValue)
 
 if(this.newValue < this.max_occupancy)

 this.total_price = this.extra_price / ( this.newValue - this.base_capacity )
 this.person_number =this.newValue - this.base_capacity
 this.$emit('input', this.totalprice)
 this.$emit('input', this.person_number)
 
 ,
 mpplus: function () ,


 ,

...using this template:

 <div class="minusplusnumber">
 <div class="mpbtn minus" v-on:click="mpminus()">
 -
 </div>
 <div id="field_container">
 <input type="number" v-model="newValue" disabled />
 </div>
 <div class="mpbtn plus" v-on:click="mpplus()">
 +
 </div>
 </div>

When I click minus or plus, I get this warning:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "total_price"

found in

---> <Reserve> at resources/js/components/Reserve.vue
 <Root>

Here is an example of how to use props along with mutation - this is a good way of summarizing what you are trying to accomplish..

Just change the number in :default-value=X to simulate passing down a prop..

Full Link:
https://codepen.io/oze4/pen/PLMEab

HTML:

<!-- Main Vue instance (aka parent) -->
<div id="app">
 <!-- ----------------------------------------- -->
 <!-- CHANGE THE NUMBER 10 TO WHATEVER YOU WANT -->
 <!-- ----------------------------------------- -->
 <my-counter :default-value=10></my-counter>
</div>


<!-- Child component as x-template component -->
<script type="text/x-template" id="counter">
 <div>
 <div style="border: 1px solid black; width: 250px; margin: 40px 40px 40px 40px">
 <v-btn @click="increase" color="blue">Increase</v-btn>
 <v-btn @click="decrease" color="red">Decrease</v-btn>
 </div>
 <div>
 <div>
 <h3 style="margin-left: 40px;">Current Count: currentValue </h3>
 </div>
 </div>
 </div>
</script>

JS/Vue

/**
 * Child component as x-template
 */
const appCounter = 
 template: '#counter',
 props: 
 defaultValue: 
 type: Number,
 default: 0
 
 ,
 data() 
 return 
 currentValue: '',
 
 ,
 mounted() 
 this.currentValue = this.defaultValue;
 ,
 methods: 
 increase()
 this.currentValue++;
 ,
 decrease()
 this.currentValue--;
 
 



/**
 * Main Vue Instance
 */
new Vue(
 el: "#app",
 components: 
 myCounter: appCounter
 
);