Recently, I've been utilizing Vue3 and Nuxt3 to work on a project. My main task involves extracting the :id parameter from the URL and checking if it matches an ID in a JSON file. If there is a match, I update a reference data point called 'exists'. The console log confirms that everything is functioning correctly. The only issue I'm facing is that this.exists is appearing as undefined. Despite trying the const self = this; workaround, the problem persists.
Here's the full warning message:
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"/>