updating ref with watch / get request

I have a ref that I need to update based on the value of a radio button. I'm using watch and async. The request works fine, but the value stored is the based on the previous value...

For example if button A is selected and I click on button B, the response is based on button A's value.

Not sure that makes sense. I'm new and asked this a few different ways and gone down the wrong direction a few times flailing. I think it's an easy fix that has to do with the order of how the DOM is rendering because it works correctly the first time the page loads, but I can't figure it out. It's driving me crazy...I know I'm missing a basic concept and gonna just try to do it without using Vue to move forward, but I want to understand.

The code is below. Any help is appreciated.

<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";
import DateInput from '@/Shared/DateInput';
import SelectInput from '@/Shared/SelectInput';
import TextInput from '@/Shared/TextInput';

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>

<template>
    <Head title="PoS" />

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

mpk123

4 years ago

Level 3

This works. I was relying what I saw in the Vue dev tools.

Please or to participate in this conversation.