在 VueJS 中发生变异的道具

Question

I am new to vue and I am getting this error, I am not sure if I am passing the props right and executing it well in the other component. I will explain in details what I am trying to acheive.

I am hiding a component on click on this page and showing another element on click interchangeably here.

I have read a couple of solutions but I do not understand how I'm exactly suppose to fix it

 <div v-if="hidden" class="orderSummary">
      <div class="orderSummary__container">
        <h2 class="orderSummary__header">Order Summary</h2>
 <button @click="showForm()" class="total__button">Continue</button>
 <PaymentForm v-if="!hidden" :hidden="hiddenMode" />
</div>
</div>

 methods: {
    showForm() {
      if (this.subTotal > 1) {
        this.hidden = false;
      }
    }
  },

now in the Payment Form component I need to hide the component and make the other appear also, i want to do this by passing props. This is my code

 <div class="payForm">
      <div @click="hideForm()" class="PayForm__icon">
        <backIcon class="icon" />
        <span class="PayForm__icon-text">Go &nbsp; back</span>
      </div>
</div>

props: ["base_amount", "value_added_tax", "hiddenMode"],

methods: {
    submit() {
      const data = {
        name: this.name,
        
      };
      
    },

    hideForm() {
     this.hiddenMode = true;
    }
  },

I'm getting the error below, what do I do

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: "hiddenMode"

Answer 1

Don't make hiddenMode a prop; set it to state through data:

//parent
props: ["base_amount", "value_added_tax"],


data() {
   return {
        hiddenMode: false
   }
},
...

edit:

You should also move hideForm() to the parent component and instead bind to PaymentForm's onlick:

@click="$emit('clicked')"

then in the parent component bind hideForm to the clicked emit:

<PaymentForm v-if="!hidden" :hidden="hiddenMode" @clicked="hideForm"/>

Note: the $emit doesn't have to be called "clicked" you can name it anything

Answer 2

Use the .sync modifier. This way the child component does not modify the property directly. So the parent would be

<PaymentForm v-if=":hidden".hidden-mode.sync="hiddenMode" />

and the child would be

hideForm() {
  this.$emit('update:hiddenMode', true);
}

Answer 3

First, there is a logical problem here. If hidden is false then the first DIV and children including PaymentForm are not existing. If hidden is true the PaymentForm not showing too because you have a <PaymentForm v-if="!hidden"

Second, your PaymentForm has a hiddenMode prop and you don't set it in the parent vue. You should have :hiddenMode="hidden" and not :hidden="hiddenMode"

For you hideForm function use $emit

  this.$emit('update:hiddenMode', true);