In my Vue.js project, I am trying to work with a form where the end_saving value needs to be computed based on the values of start_saving and duration. To achieve this, I want to utilize the saving.end_saving property in the v-model for submission via a POST method using Axios.
<template>
......
<b-form-datepicker
locale="id"
:value="endSaving"
@input="saving.end_saving= $event.target.value"
></b-form-datepicker>
......
</template>
....
data() {
return {
saving: {
start_saving: "",
duration: "",
end_saving: "",
},
computed: {
endSaving: {
get: function () {
return moment(this.saving.start_saving)
.add(this.saving.duration, "days")
.subtract(1, "days")
.format("YYYY-MM-DD");
},
set: function (newValue) {
return (this.saving.end_saving = newValue);
},
},
},
methods: {
submitForm() {
axios
.post("/api/saving", this.saving)
.then(
(response) =>
(window.location.href = `/saving/${response.data.id}`)
)
.catch((error) => console.log(error));
},
}
However, when attempting to submit the form, the end_saving value is always returning as null.