我有一个传递给组件的日期对象,当单击新日期时,列表会发生变化,因此我认为我需要使用计算属性来设置日期。我尝试使用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,
};
}
}
}