javascript - vue warn - 避免直接修改 prop，因为只要父组件重新渲染，该值就会被覆盖

Question

在这里，我有一个名为 total_price 的变量，它是我从 laravel 发送的。我想为它做很多事情。当我使用方法时，当脚本运行它们时，我得到了 mutating error。这是脚本:

 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)
            }
        },


    },

...使用此模板:

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

当我点击 minus 或 plus 时，我收到此警告:

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

Answer 1

Here是一个如何使用 props 和 mutation 的例子——这是总结你想要完成的事情的好方法..

只需更改 :default-value=X 中的数字即可模拟传递一个 prop..

完整链接: 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
  }
});