Блог

Главная - Вопросы по программированию - Не удается изменить состояние с помощью вычисляемого параметра в Vue

Не удается изменить состояние с помощью вычисляемого параметра в Vue

#javascript #vue.js #axios

#javascript #vue.js #axios

Вопрос:

Мне нужно отправить форму, используя вычисляемое свойство в Vue.js . end_saving Вычисляется из start_saving и duration . Мне нужно использовать saving.end_saving in v-model , чтобы я мог отправить значение в методе POST через 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));
 },
}

Но каждый раз, когда я отправляю форму, end_saving всегда null .

Комментарии:

1. Это довольно запутанно. Какие свойства должны быть доступны для редактирования пользователем в пользовательском интерфейсе? Где находятся start_saving и duration присвоенные значения?

2. Я чувствую, что ваш параметр для endSaving должен быть просто set: function(newValue) {this.saving.end_saving = newValue} . Это еще не тестировалось.

3. @Phil ya есть форма ввода для start_saving и duration

4. @Phil В форме есть 3 входных параметра: start_saving, duration и end_saving. значение end_saving только для чтения, значение из start_saving duration. Таким образом, пользователь может просто ввести, чтобы начать сохранение и продолжительность

5. Если он доступен только для чтения, почему вы добавили для него средство выбора даты?

Ответ №1:

Похоже, вам было бы лучше вычислить весь 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">

и используйте this.saving в своем POST-запросе Axios (как у вас сейчас)

 axios.post("/api/saving", this.saving)