VueJS - 如何在收到成功消息后自动关闭弹出窗口

Question

我正在使用 Vusax 库的 vs-popup 组件来显示内容，我可以通过下面代码中的方法关闭 vs-popup。我实际上在弹出窗口中有一个表单，所以我的问题是如何让 vs-popup 在成功消息后自动关闭。

这里是User.vue

HTML

 <vs-button @click="popupSettings = true" > Settings</vs-button>

<vs-popup title="Settings"  :active.sync="popupSettings ">
    <user-settings>
        <vs-button color="dark" @click="close()">Cancel</vs-button>    //This is the slot
    </user-settings>
</vs-popup>

JS

 close () {
      return this.popupSettings  = false
    },

这是UserSettings.vue

HTML

<div class="form-group">
  <slot></slot>
  <vs-button  @click="saveSettings($event)" >Save</vs-button>
</div>

JS

      this.$http.put(/settings, params)
      .then((response) => {
        this.alert('success', 'Success', 'Settings saved successfully!')

        // Here i want to close the vs-popup but that is in User.vue
      })

请帮帮我，我该怎么做。

Answer 1

这是我上面评论的一个例子：https://codesandbox.io/s/nice-firefly-frfkc?file=/src/App.vue

children 中有趣的部分在这里

async saveSettings() {
  try {
    const response = await fetch(
      "https://jsonplaceholder.typicode.com/todos/1"
    );
    const json = await response.json();
    if (json) this.$emit("success", true); // emit to the parent
  } catch (err) {
    console.warn("error", err);
  }
},

我嘲笑了一些 GET 电话，但您可以用与 PUT 相同的方式处理它。我也使用了 async/await 更现代的方法，但仍然会收到一些错误反馈，以防出现问题。

在 parent 中，观察事件并关闭弹出窗口。

<user-settings @success="closePopup">
  ...
</user-settings>

仅当 AJAX 调用成功时才应发出事件。

VueJS - 如何在收到成功消息后自动关闭弹出窗口

VueJS - How to automatically close popup after receiving success message

popup

vue.js