Vue-> Как исправить дочерний компонент, не обновляющий v-модель вычисляемого свойства с двусторонним…

ВСТУПЛЕНИЕ

Когда я пытался обновить ремоделирование родительского компонента, я столкнулся с этой проблемой, и он не обновлял вложенный в него дочерний компонент. Когда я сначала обновлю дочерний элемент, значение будет передано родительскому компоненту. Однако это не будет двусторонней привязкой, вместо этого, чтобы иметь возможность обновлять значение пользовательского компонента от родителя или дочернего элемента, он будет только пересекаться вверх от дочернего элемента.

ПРОБЛЕМА

Мне не удалось только обновить v-модель моего пользовательского компонента с пользовательского дочернего компонента на родительский, но я не смог перейти от пользовательского родителя к пользовательскому дочернему компоненту.

Дочерний элемент (это компонент, выбравший время начала календаря):

<template>
    <div>
        <v-autocomplete
            :label="label"
            ref="selectTimeStart"
            :items="time.full"
            v-model="selectedTime"
            outlined
            :filter="searchTime"></v-autocomplete>
    </div>
</template>
<script>
export default {
    name : "SelectTime",
    props: ['label'],
    data() {
        return {
            time: {
                hours  : null,
                minutes: ["00", "15", "30", "45"],
                full   : [],
            },

        }
    },
//..... other logic not important for this blog post.

computed: {
        selectedTime: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit('input', val);
            }
        }
    },

</script>

Родительский компонент (это был конструктор событий календаря с датами, временем, описаниями и т. д.):

<template>
    <div>
        <v-container class="my-10">            
            <v-row>
                <v-col>
                    <select-time v-model="startTime" label="Start Time"></select-time>
                </v-col>
                <v-col>
                    <select-time v-model="endTime" label="End Time"></select-time>
                </v-col>
            </v-row>
        </v-container>
    </div>
</template>
<script>
import {DateTime} from "luxon";
export default {
    name : "CalendarEvent",
    props: ['uuid', 'eventDate'],
    data() {
        return {
            time        : null,
            name        : null,
            description : null,
            selectedDate: null,
            startTime   : null,
            endTime     : null,
            existingUuid: null,
            id          : null,

        }
    },
    mounted() {
        this.selectedDate = this.eventDate;
        if (this.uuid) {
            this.getExistingCalendarEvent();
        }
    },
    methods : {
        getExistingCalendarEvent() {
            axios.post('/calendar/getEvent', {
                uuid: this.uuid,
            }).then((response) => {
                if (response.data.status == 'success') {
                    this.id           = response.data.event.id;
                    this.existingUuid = response.data.event.uuid;
                    this.name         = response.data.event.event_name;
                    this.description  = response.data.event.event_desc;
                    this.selectedDate = DateTime.fromSQL(response.data.event.event_start).toISODate()
                    this.startTime    = DateTime.fromSQL(response.data.event.event_start).toLocaleString(DateTime.TIME_SIMPLE);
                    this.endTime      = DateTime.fromSQL(response.data.event.event_end).toLocaleString(DateTime.TIME_SIMPLE);
                    this.startTimeKey = Math.random();
                    this.endTimeKey   = Math.random();

                }

            });

        },
//... other logic that doesn't matter for this blog post

РЕШЕНИЕ

По-видимому, v-модели не так умны, как утверждает Vue, с вашими реквизитами, и вам нужно специально указать реквизит value. Это позволит вашему вычисляемому свойству в вашем дочернем компоненте иметь двустороннюю привязку/связь между собой и вашим родительским компонентом.

У ребенка:

//Before the Fix

props: ['label'], 

//After the fix (use this second one)

props: ['label','value'], 

TL;DR

Добавьте значение в массив реквизитов в вашем компоненте.

Удачного кодирования.