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"/>