Question

由于更改道具是一种反模式，因此我将以下操作作为解决方法之一，但是当我用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);
    });
  }
 }
};

Answer 1

您的超时处理程序正在建立新的上下文。代替

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属性。

为什么带有props初始值的数据中声明的字段未定义？

1 个答案: