已分配计算属性“showHazteSocioPopup”，但它没有设置器

Question

谁能向我解释这个错误。这个组件的想法是在它从父组件接收到布尔属性时显示一个弹出窗口。它可以工作，但是当我尝试关闭弹出窗口时出现错误。提前致谢。

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

Answer 1

您正在尝试更改 computed 属性。您可以使用computed setter，如下所示：

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

所以在父级中，添加这个监听器和方法：

@isVisibleChanged="isVisibleChanged"

isVisibleChanged(newVal){
     this.inVisible=newVal
}

一个更简单的解决方案是直接将新值发送给父级，而不是添加一个 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()
    }
  }