[英]Can't change the state using computed setter in Vue
我需要使用 Vue.js 中的計算屬性提交表單。 end_saving
是根據start_saving
和duration
計算的。 我需要在v-model
使用saving.end_saving
以便我可以通過 Axios 在 POST 方法中提交值。
<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));
},
}
但是,每次我提交表單時, end_saving
總是null
。
聽起來你最好計算整個savings
對象。
例如
data: () => ({
start_saving: "",
duration: 0
}),
computed: {
saving: ({ start_saving, duration }) => ({
start_saving,
duration,
end_saving: moment(start_saving).add(duration - 1, "days").format("YYYY-MM-DD")
})
}
然后將您的兩個表單輸入綁定到start_saving
和duration
<b-form-datepicker
locale="id"
v-model="start_saving"
></b-form-datepicker>
<input type="number" v-model.number="duration">
並在您的 Axios POST 請求中使用this.saving
(就像您目前擁有的那樣)
axios.post("/api/saving", this.saving)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.