如何获取Vue中输入的修改值？

Question

我有一个传递给组件的日期对象，当单击新日期时，列表会发生变化，因此我认为我需要使用计算属性来设置日期。我尝试使用

data

但单击新日期时该值不会更改。

当我在输入框中输入内容时，如何获取当前输入框中的值？ （在shift1_start中）？

<form method="post" @submit.prevent="updateShifts">
                <div class="text-center bg-slate-800 mt-2 rounded-lg">
                    <span>Shift 1</span>

                    <div class="flex items-center justify-between pb-2 px-4">
                        <input name="shift1_start"
                               class="text-gray-900 w-[54px] px-1 text-center rounded border-2 border-gray-500 bg-white inline-flex items-center justify-center invalid:border-red-500 disabled:bg-slate-400 disabled:text-slate-800"
                               pattern="^(2[0-3]|[01]?[0-9]):([0-5]?[0-9])$"
                               maxlength="5"
                               :value="firstSelectedDate.shift1_start"
                        >
                    </div>
                </div>

                <div class="text-center">
                    <button type="submit" class="bg-orange-500 px-2 py-1 mt-2 rounded-lg text-white">Save</button>
                </div>
            </form>
        </div>
    `,

    props: {
        dates: [Object, null]
    },

    methods: {
        updateShifts() {
            console.log(this.firstSelectedDate);
        }
    },

    computed: {
        firstSelectedDate() {
            return {
                nwd: this.dates[0].base_shift_nwd,
                shift1_start: this.dates[0].base_shift1_start,
            };
        }
    }
}

Answer 1

Answer 2

您可以通过

v-model

直接将日期绑定到输入，不需要计算

<input ... v-model="dates[0].base_shift1_start"/>