Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

mpk123's avatar

Uncaught (in promise) TypeError: can't access property "parentNode", node is null

Any insight why I get the following error when I try to click on a link to a different page?

Uncaught (in promise) TypeError: can't access property "parentNode", node is null

<script setup>
import Layout from '@/Layouts/Authenticated.vue';
import { Head, useForm } from '@inertiajs/inertia-vue3';
import { Inertia } from '@inertiajs/inertia';
import {watch, onBeforeMount, ref} from "vue";

const props = defineProps({       
    mealServices: Array,
});

let form = useForm({
    meal_type_id: '', 
});

let storeTally = () => {
    form.post('/pos')
};

// auto select MealService based on user's time.

onBeforeMount(() => {
let currentTime = new Date();
let clientTime = currentTime.toTimeString();
let i = 0;
    while (i < props.mealServices.length) {
        if(clientTime < props.mealServices[i].end_time) {
            form.meal_type_id = props.mealServices[i].meal_type_id; 
            i = props.mealServices.length;
        } else {
            i++
            form.meal_type_id = 1;
        }; 
    }; 
});


const error = ref(null)

// declaure variable to store response 

const activeMealService = ref([])

//Watch for change of MealService and set activeMealService

watch(form, async () => { 
    try {
       const res = await fetch('/pos/setMealService?&mealType=' + form.meal_type_id)
       activeMealService.value = await res.json()
    } catch (error) {
        activeMealService.value = 'Error! couold not reach API' + error
    }
});

</script>
<Layout>   
    <form @submit.prevent="storeTally" class="font-mono text-sm font-bold h-full">
                    <div>Meal:</div>
                        <div v-for="mealService in mealServices" :key="mealService.id">
                            <input  type="radio" name="meal_type" 
                                    :id="mealService.meal_type_id" 
                                    :value="mealService.meal_type_id" 
                                    v-model="form.meal_type_id"/>
                            <label  :for="mealService.meal_type_id">{{ mealService.meal_type.name }}</label>
                        </div>
                        <div>Selected: {{ form.meal_type_id }}</div>    
                </div>   
      </form>
</Layout>
```
0 likes
1 reply
MohamedTammam's avatar

I don't see a link in your code. And can you please show your layout component code.

Please or to participate in this conversation.