Javascript vue warn-避免直接改变道具，因为每当父组件重新渲染时，该值将被覆盖

在这里，我有一个名为

total\u price

的变量，它是我从laravel发送的。我想对它做很多事情。当我使用方法时，当脚本运行它们时，我会得到

变异错误

。以下是脚本：

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

我在以下方法中使用它们：

    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 () {
            if (this.max === undefined || (this.newValue < this.max)) {
                this.newValue = this.newValue + 1
                this.$emit('input', this.newValue)
            }
            if(this.newValue > this.base_capacity){
                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)
            }
        },


    },

这是一个如何使用道具和变异的例子-这是一个很好的总结你要完成的事情的方法

只需更改

：default value=X

中的数字即可模拟传递道具

完整链接：

---

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>

---

组件的名称是什么（

.vue

文件的名称）？尝试从

props

部分删除

总价：{type:Number}，

，仅将其保留在

data（）

上。它还能用吗？警告已经很清楚了。只需在

created（）中复制一份
total_price

函数并对该副本进行更改。重要的是在已装入的functin中使用该值将其向上传递是？？ofc我不知道为什么会出现此错误，因为我只有一个组件，正如vue inspector向我显示的2 ofc，但我不会将数据发送给secound one。如果您直接修改道具，则会出现此错误。此行：

This.total\u price=This.extra\u price/（This.newValue-This.base\u capacity）

您需要获取该道具的值，并在

数据中对其进行变异。
[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>

<!-- 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>

/**
 * 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
  }
});