Can't set Ref data property in Vue3, item undefined

Viewed 20

Essentially I'm using Vue3 and Nuxt3. I'm trying to grab the :id param from the URL and if it matches an ID in a JSON it updates a ref data point called 'exists'. My console log shows all that is working. The issue is this.exists is showing as undefined. I attempted the const self = this; trick, to no avail.

Full warning:

500: Cannot set properties of undefined (setting 'exists')

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

<script>

import hunt from '../../assets/api/hunts.json'
import { onMounted } from 'vue';
import { useRoute } from 'vue-router'

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

        onMounted(() => {
            for (let i = 0; i < hunt.length; i++) {
                if (hunt[i].address == id) { 
                    console.log('exists')
                    this.exists = true;
                    break;
                }
            }
        })

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

<styles src="../../assets/css/singlehunt.css"/>
1 Answers
Related