满口金牙 2023-03-17 15:41 采纳率: 91.5%
浏览 45
已结题

子组件修改实例, 控制v-if 失效的问题




// 父组件创建的实例
const SelectMenuData = new SelectMenu()

父组件子组件
<oneVue      v-if='SelectMenuData.show'        />

// 实例代码
class SelectMenu {
    show: Ref<boolean>
    constructor() {
        this.show = ref(false)
    }
    click() { // 点击显示
        if (this.show.value)  return this.show.value = false // 如果已经显示则关闭
        this.show.value = true
        document.addEventListener('mousedown', this.closeMenu)
    }
   // 这里会出问题,调用时,有时会报错,
    closeMenu() {
        console.log('this.show.value:', this.show) // 这里this.show.value: 为什么会有时是undefined
        this.show.value = false
        document.removeEventListener('mousedown', this.closeMenu)
    }
}

上述错误解决了, 还是没用啊
,v-if='SelectMenuData.show'   不生效, 
closeMenu() 方法改了this.show.value 
SelectMenuData.show 这个值改false了, 此组件还是显示
  • 写回答

5条回答 默认 最新

  • lshen01 2023-03-17 15:45
    关注

    参考GPT和自己的思路:

    问题的根本在于在 closeMenu 方法中的 this 关键字。在这个方法中,this 指向的是 document 对象,而不是 SelectMenu 实例对象。因此,this.show.value 会报错,因为 document 对象上并没有 show 属性。

    解决这个问题的简单方法是,将 closeMenu 方法的 this 绑定到 SelectMenu 实例上,可以使用 bind 方法或箭头函数实现:

    1. 使用 bind
    class SelectMenu {
        // ...
        constructor() {
            // ...
            this.closeMenu = this.closeMenu.bind(this)
        }
       // ...
    }
    
    1. 使用箭头函数
    class SelectMenu {
        // ...
        constructor() {
            // ...
            this.closeMenu = () => {
                console.log('this.show.value:', this.show) 
                this.show.value = false
                document.removeEventListener('mousedown', this.closeMenu)
            }
        }
       // ...
    }
    

    使用这两种方法可以确保 closeMenu 方法中的 this 绑定到正确的对象上,并且能够正确修改 show 属性。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题?

问题事件

  • 系统已结题 3月25日
  • 已采纳回答 3月17日
  • 修改了问题 3月17日
  • 创建了问题 3月17日

悬赏问题

  • ¥50 如何用单纯形法寻优不能精准找不到给定的参数,并联机构误差识别,给定误差有7个?matlab
  • ¥15 workstation加载centos进入emergency模式,查看日志报警如图,没有XFS,怎样解决呢?
  • ¥20 求各位解释一道区间DP
  • ¥15 应用商店如何检测在架应用内容是否违规?
  • ¥15 Ubuntu系统配置PX4
  • ¥50 nw.js调用activex
  • ¥15 数据库获取信息反馈出错,直接查询了ref字段并且还使用了User文档的_id而不是自己的
  • ¥15 将安全信息用到以下对象时发生以下错误:c:dumpstack.log.tmp 另一个程序正在使用此文件,因此无法访问
  • ¥15 速度位置规划实现精确定位的问题
  • ¥15 MAC虚拟机(win11)USB插上后无串口com,无法烧录