Vue typescript ref：无法在布尔值“false”上创建属性“值”

Question

我正在使用带有 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< boolean >).value = true，但没有解决问题。

Answer 1

我知道这是一个旧问题，但我遇到了类似的问题，因为没有仔细阅读文档。

也许有人会觉得它有用，所以我在这里留下了答案。

[来自文档]的回答：

请注意，在模板中访问时，从设置返回的引用会自动浅层展开，因此访问它们时无需使用 .value。在此访问时，它们也以相同的方式解开。

setup() {
    const isOpen = ref<boolean>(false);
},
methods: {
    public toggleGuestList(toggle:boolean) {
        this.isOpen.value = toggle; // will not work (as isOpen already unwrapped)
        this.isOpen = toggle;  // will work
    }
}

如果你使用里面的方法，setup那么：

setup() {
    const isOpen = ref<boolean>(false);

    function toggleGuestList(toggle:boolean) {
        this.isOpen.value = toggle; // will not work as we should access to isOpen without this inside setup
        isOpen.value = toggle; // will work
    }
}