How mutate data in method computed?

Question

I'm on Vue 3. I have an onclick method which is supposed to modify the value of my props which is a boolean, I have tried several ways, I manage to enter the computed method, but the value of my props does not change

I register my data

data() {
 return {
  showConsommationWindow: false
 }
}

then I tried 3 ways to change the value but none of them worked. The first :

<submit-button v-on:click="showConsommationWindow = true" />

the 2nd : (alert is executed but the data value don't change)

<submit-button v-on:click="showConsommation(true)"/>

  methods: {
    showConsommation(boolValue){
        alert('false')
        this.showConsommationWindow = boolValue;
      }
  }

The last :

<submit-button v-on:click="showConsommation"/>

  methods: {
    showConsommation(){
      if (!this.showConsommationWindow) {
        alert('false')
        this.showConsommationWindow = true;
        return
      }
      this.showConsommationWindow = false;
    }
  },

I really don't understand why my data can't mutate, thanks for your help.

Answer 1

If value comes from a props, it means the parent distributes a boolean to the component. So if you want to change the boolean value, you should probably do:

// in parent

<Component :booleanValue="myBoolean" @changeBooleanValueEvent="changeMyBoolean" />

...

data() {
  return {
    myBoolean: true
  }
}

methods: {
  changeMyBoolean(value) {
    this.myBoolean = value
  }
}

// in component

props: {
  booleanValue: {
    ...
  }
}

methods: {
  showConsommation() {
    this.$emit('changeBooleanValueEvent', false)
  }
}