computed property "showHazteSocioPopup" was assigned to but it has no setter

Question

Can someone explain to me this error. the idea in this component is to show a pop-up once that it receive a boolean property from the father component. And it works but when I try to close the Pop-up I have the error. Thanks in advance.

<template>
  <v-dialog v-model="showHazteSocioPopup" max-width="700">
    <v-sheet>
      <p id="test-v-dialog">
        Pop-Ups
      </p>
      <v-btn @click="showMemberPanel">
        Hacerse Socio
      </v-btn>
      <v-btn @click="hideMemberPanel">
        Seguir con la compra
      </v-btn>
    </v-sheet>
  </v-dialog>
</template>

<script>
export default {
  name: 'PopupCheckoutActeSocio',
  props: {
    isVisible: {
      type: Boolean,
      require: true
    }
  },
  computed: {
    showHazteSocioPopup () {
      return this.isVisible
    }
  },
  methods: {
    showMemberPanel () {
      this.showHazteSocioPopup = false
      this.$store.commit('setPanelComponent', 'alta-socio-checkout')
      this.$store.commit('setPanelVisibility', true)
    },
    hideMemberPanel () {
      this.showHazteSocioPopup = false
      this.$parent.finishOrder()
    }
  }
}
</script>

Majed Badawi Majed Badawi · Accepted Answer · 2020-06-15T14:39:58

You are trying to change a computed property. You can use computed setter as follows:

showHazteSocioPopup:{
     //getter
     get: function () {
          return this.isVisible
     },
     // setter
     set: function (newValue) {
          this.$emit('isVisibleChanged',newValue)
     }
}

So in the parent, add this listener and method:

@isVisibleChanged="isVisibleChanged"

isVisibleChanged(newVal){
     this.inVisible=newVal
}

A simpler solution would be directly emitting the new value to the parent instead of adding a setter:

 computed: {
    showHazteSocioPopup () {
      return this.isVisible
    }
  },
  methods: {
    showMemberPanel () {
      this.$emit('isVisibleChanged',false)
      this.$store.commit('setPanelComponent', 'alta-socio-checkout')
      this.$store.commit('setPanelVisibility', true)
    },
    hideMemberPanel () {
      this.$emit('isVisibleChanged',false);
      this.$parent.finishOrder()
    }
  }

computed property "showHazteSocioPopup" was assigned to but it has no setter

1 Answers