Vue打字稿参考：无法在布尔值'false'上创建属性'value'答案

【问题标题】：Vue typescript ref: Cannot create property 'value' on boolean 'false'Vue打字稿参考：无法在布尔值'false'上创建属性'value'
【发布时间】：2021-12-02 15:51:09
【问题描述】：

我正在使用带有 typescript 和 headless ui 的 vue。当我尝试按照以下示例显示对话框时：https://headlessui.dev/vue/dialog，我收到错误：类型“true”不可分配给类型“Ref”

我在我的组件类中声明了 isOpen 变量：

private readonly isOpen = ref<boolean>(false);

打开对话框的按钮的 html 是：

<button class="btn" @click="toggleGuestList(true)">View list</button>

切换对话框的方法是：

public toggleGuestList(toggle:boolean) {
   this.isOpen.value =  toggle;
}

当这个方法被激活时我得到了错误：

无法在布尔值“false”上创建属性“值”

似乎 isOpen 被解析为纯布尔值。我怎样才能强迫它把它看作一个参考？我试过 (this.isOpen as Ref).value = true ，但没有解决问题。

【问题讨论】：

我也遇到了同样的问题，你找到解决办法了吗？转换为 Ref 应该没有任何区别，因为它只会转换类型而不是数据。不知道如何解决这个问题。
我放弃了，决定放弃vue-typescript。现在我重新配置了我的项目以使用常规的 java 脚本。

标签： typescript vuejs3

【解决方案1】：

var obj = false;
obj.name = 'hello';  // TypeError: Cannot create property 'name' on boolean 'false'

var obj = {};
obj.name = 'hello';  // OK

【讨论】：

我不认为这是问题所在。从外观上看，value 属性正在从 ref 中获取值，因此将对其进行定义。或者至少，它应该是。