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

Posted 2023-02-23

【中文标题】已分配计算属性“showHazteSocioPopup”，但它没有设置器

【英文标题】：computed property "showHazteSocioPopup" was assigned to but it has no setter

【发布时间】：2020-10-04 23:54:48

【问题描述】：

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

<template>
  <v-dialog v-model="showHazteSocioPopup" max->
    <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>

【参考方案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()
    
  

【讨论】：

我尝试使用您的想法，如下所示code 计算： showHazteSocioPopup: get: function () return this.isVisible , set: function (newValue) this.isVisible = newValue , code 现在我有另一个错误 italic_Avoid 直接改变一个道具，因为只要父组件重新渲染，该值就会被覆盖。相反，使用基于道具值的数据或计算属性。正在变异的道具：“isVisible”_italic

哦，因为inVisible 是prop，所以不能直接从组件中更改它。您可以将其值emit 设置为父级，并在更新后的代码状态下更改它。或者您可以保留您的代码并使用emit 而不是直接更改计算属性

@MiguelFernándezLizarbe 如果它解决了您的问题，请将答案标记为解决方案，或者如果您遇到其他问题，请告诉我。

顺便说一句，您的代码似乎很复杂。您在这里不需要计算属性。为什么不使用v-if="isVisible" 而不是v-model="showHazteSocioPopup"？并按照上面的说明保持发射