Почему объявленное поле в данных с начальным значением реквизита не определено? - PullRequest
Новая
       26

Почему объявленное поле в данных с начальным значением реквизита не определено?

0 голосов
/ 23 апреля 2019

Поскольку мутирование реквизита является антипаттерном, я делаю следующее как одно из решений этой проблемы, однако, когда я console.log мое новое поле данных, я получаю неопределенным. Что не так? 

export default {
 name: "modal",
 props: ["show"],
 data() {
  return {
    sent: false,
    mutableShow: this.show
  };
},
methods: {
  closeModal: function() {
    this.mutableShow = false;
  },
  sendTeam: function() {
    var self = this;
    let clientId = JSON.parse(localStorage.getItem("projectClient")).id;
    axios({
      method: "get",
      url: "/send-project-team/" + clientId,
      data: data
    })
    .then(function(response) {
      self.sent = true;
      $("h3").text("Wooo");
      $(".modal-body").text("Team was sent succesfully to client");
      setTimeout(function() {
        console.log(this.mutableShow);
        self.closeModal();
      }, 3000);
    })
    .catch(function(error) {
      console.log(error);
    });
  }
 }
};

1 Ответ

0 голосов
/ 23 апреля 2019

Ваш обработчик времени ожидания устанавливает новый контекст. Вместо 

setTimeout(function() {
    console.log(this.mutableShow);
    self.closeModal();
}, 3000);

вы можете использовать 

setTimeout(() => {
    console.log(this.mutableShow);
    self.closeModal();
}, 3000);

И вам нужно внести аналогичные изменения в 

.then(function(response) {

до 

.then(response => {

сказав это, я не уверен, что код будет вести себя так, как вы этого хотите. Как только пользователи закроют модальный режим, будет невозможно открыть его снова, поскольку нет способа сделать mutableShow равным true.

Отредактировано, чтобы добавить:

Поскольку вы определяете переменную self, вы также можете использовать это. 

console.log(self.mutableShow);

Отредактировано, чтобы добавить:

Не зная конкретно, что такое поведение, лучшее предложение, которое я могу предложить, - это следовать принятым практикам Vue. А именно, после того, как AJAX-запрос будет выполнен успешно, создайте пользовательское событие. Попросите родительский компонент прослушать это событие и при запуске измените значение show.

...