Vue3中Ref数据属性设置失败：exists为undefined问题求助

错误原因 #

1. setup函数中不存在this：Vue3的Composition API里，setup在组件实例创建前执行，此时this指向undefined，所以this.exists会触发"Cannot set properties of undefined"错误。
2. 未导入ref：代码里用了ref(false)但没从vue导入ref，导致exists无法被正确创建为响应式变量。
3. ref变量修改需用.value：ref创建的响应式变量，在setup内部修改时必须通过.value访问，直接赋值无效。

修复方案 #

• 补充导入ref
• 直接操作exists.value，彻底抛弃this
• 可选：用数组some方法简化匹配逻辑，替代for循环

修改后的完整代码 #

<template>
    <div class="single-hunt">
        <div class="container">
            Single Hunt 
        </div>
    </div>
</template>

<script>
import hunt from '../../assets/api/hunts.json'
import { onMounted, ref } from 'vue'; // 补充导入ref
import { useRoute } from 'vue-router'

export default {
    setup() { 
        const route = useRoute();
        const id = route.params.id;
        const exists = ref(false);

        onMounted(() => {
            // 用some方法简化匹配逻辑，更简洁直观
            const isExist = hunt.some(item => item.address === id);
            exists.value = isExist;
            
            // 若保留原循环写法，修改为：
            // for (let i = 0; i < hunt.length; i++) {
            //     if (hunt[i].address == id) { 
            //         console.log('exists')
            //         exists.value = true;
            //         break;
            //     }
            // }
        })

        return {
            hunt,
            exists
        }
    }
}
</script>

<style src="../../assets/css/singlehunt.css"/>

关键说明 #

• 在setup函数内部，所有ref/reactive创建的响应式变量，直接用变量名访问，修改ref类型变量必须加.value。
• Composition API不再依赖this，组件的状态和逻辑都在setup内部定义和管理。

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