Vue3TS内联三元运算符报Property type does not exist on type boolean错误

这个报错是Vue3模板访问规则和TS类型校验共同触发的：

• 使用<script setup>语法时，ref定义的响应式变量传入模板后会被自动解包，不需要手动加.value取内部值
• 你在模板插值里写show.value时，模板语境下的show已经是解包后的布尔值（true/false），原始布尔类型本身没有value属性，TS检测到类型不匹配就抛出了该错误
• 额外提个笔误：你写的三元表达式两个分支返回的图标名完全一致，就算逻辑正常运行，点击后图标也不会有切换效果。

直接删掉模板插值里访问show时多余的.value即可，修正后的完整代码如下：

<template>
<div class="d-flex cursor-pointer justify-content-between border rounded bg-white mt-4 p-2 w-100 " @click="dropdown">
    <span>Purchase Requsition</span>
    <span class="material-icons fs-28 text-primary">
        {{ show ? 'arrow_circle_up' : 'arrow_circle_down' }}
    </span>
</div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const show = ref<boolean>(false)

function dropdown(){
   // script块里访问ref值仍然需要手动写.value，不要和模板规则搞混
   show.value = !show.value
}
</script>

<style scoped>
</style>

注意：只有模板内的ref会被自动解包，<script>逻辑块中访问ref的内部值，仍然需要手动写.value。

内容的提问来源于stack exchange，提问作者David Ajuka