0

I'm trying to set the default value of a v-autocomplete component by adding values to the associated v-model. The value is not being set.

I have an array of dates for a week. A v-autocomplete component gets rendered for each day of the week with the following code:

<div v-for="(date, index) in datesOfWeek" :key="index">
    <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg mb-4">
        <div class="p-6">
            <div class="text-h5">{{date}}</div>
            <form @submit.prevent="" class="mt-6 space-y-6">
                <v-autocomplete
                    label="What sounds good?"
                    :items="meals"
                    item-title="meal.title"
                    item-value="meal.id"
                    return-object
                    v-model="selectedMeal[index]"
                    @update:modelValue="submitForm"
                ></v-autocomplete>
                <v-text-field type="hidden" :value="index" v-model="form.date" />
            </form>
        </div>
    </div>
</div>

I'm passing in the meals for the week from a prop and assigning it the value of the selectedMeal constant via the onMounted() event hook.

onMounted((selectedMeal)=>{
    selectedMeal = props.table_meals;
    console.log(selectedMeal);
});

This is what the selectedMeal object looks like when it gets the props from the backend:

enter image description here

This is what the model of the autocomplete component looks like after the user has submitted it: enter image description here

The structure of the objects look the same to me. Why isn't the component using the default values that are being passed to it?

Hovercraft Full Of Eels
  • 283,665
  • 25
  • 256
  • 373
Kevin
  • 60
  • 8
  • Something interesting that I've noticed...if I hardcode the value of the selectedMeal object into the code, everything works fine. I'm still unable to set the defaults programmatically using the onMounted event hook. – Kevin Aug 25 '23 at 15:33

1 Answers1

1

Okay...I solved it. Honestly think I was doing too much, looking at too much and not thinking clearly.

For someone reason I was trying to set the value of the model in the onCreated hook. I simply defined it in a constant and voila.

const selectedMeal = props.table_meals;
Kevin
  • 60
  • 8