vue-cli3:点击popup组件遮罩层,报错:Computed property has no setter

573 阅读1分钟

微信截图_20210407143200.png

情景描述:项目使用的是vant ui框架,在引用popup组件,点击遮罩层时,代码报错

1、源码

<template>
    <van-popup v-model="toggle" position="right">内容</van-popup>
</template>
<script>
    export default {
        computed:{
            toggle(){
                return this.show
            }
        }
    }
</script>

2、修改

(1)直接给toggle设置set方法
   <script>
    export default {
        computed:{
            toggle:{
                  get(){
                    return this.show
                  },
                  set(){
                    this.$emit('setFn')
                  }
            }
        }
    }
   </script> 
(2)给popup组件自定义点击遮罩层事件
<template>
    <van-popup v-model="show" position="right" @click-overlay="handleClickOverlay" :close-on-click-overlay="false">内容</van-popup>
</template>
<script>
    export default {
        methods:{
            handleClickOverlay(){
              this.$emit('hideOverlay')
            }
        }
    }
</script>