在向Vuejs中的数据库发送发布请求后，在屏幕上动态添加卡片

编程问答 2022-10-31

问题描述

我想刷新我的cardData数组，该数组在我向数据库发送发布请求之后通过数据库的get请求获得其值。我已经编写了此saveDraft()函数，该函数在单击时会向cardData数组添加值，但是我需要刷新页面或单击两次以查看更改。有没有一种方法可以动态地执行此操作而不刷新页面？

    saveDraft() {
      Api.createComment({
          // it's a post request
        })
        .then(res => {
          if (response.status == 200) {
            Api.getComments().then(res => {
              // it's a get request to update the cardData
              if (res.status === 200) {
                this.cardData = res.data;
              } else {
                // catches error
              }
            });
          } else {
            // catches error
          }
        });
    },

解决方法

我无法确切地看到您如何实现saveDraft（）函数，但是我将按照您提供的内容工作！

一般来说，要回答您的问题，我认为这取决于您要单击两次或刷新页面的含义（即“单击”是指您已将其绑定到用户事件，例如@dblclick或@click？）。 。但是在Vue中，您可以通过以下方式处理动态事件：

1）该功能在子组件中吗？如果是，则考虑使用v-on directive来监听用户事件（即@dblclick，@click，@mouseover等），发出custom event或创建watcher来“更新”父项中的数据。

  • 如果这令人困惑，您可以在event handling上观看Vue Mastery的视频，该视频涵盖了从子组件向父组件发出事件的基础。

2）您可以考虑使用Vuex作为状态管理器。这可以帮助提高反应性-更新通过变异和动作传递的组件或数据片段。签出general overview of Vuex and reactivity in Vue on Vue Mastery

如果此 still 没有意义，请在此处告诉我，或在需要时更新您的问题：）

getjavascriptpostrequestvue.js