同步动态列表中的问题与来自服务器的请求列表（VueJs）

Question

我有一个动态列表 [我在哪里创建一个数组，当用户输入任何文本时，它会为他创建一个新项目并将其与屏幕上的另一个项目一起打印]。

当页面打开（第一次加载）时，程序将向服务器发送 HTTP 请求，为当前用户带来所有项目并打印它们.. 同一个页面我有一个输入字段和当前用户的所有项目被列出来。 当用户尝试将新项目添加到他的列表中时，HTTP 请求成功添加到列表中 [但未显示在页面中，如果我刷新页面，则新项目添加到列表中]

我的代码如下：

在<script> ：

    export default {
      name: "Projects",
      data: function() {
          return {
            Projects: [],
            ProjectName:'',
            Username:''
          }
      },
      created(){
        this.GetAllProjects(); //print all Projects.
      },
      methods: {

        CreateNewProject: function() {

          var app = this; var idNo = XXXXX; var username= XXXXX;

          axios({
            method: "post",
            timeout: 3000,
            headers: {
                               .......
            },
            url: "XXXXXXX", data: {
              name: app.ProjectName,
              username: username,
            }
          }) 
          .then(function(response) {
            console.log(response);
            app.ProjectName = "";

          })
          .catch(function(error) {
            console.log(error);
          });
        },
        GetAllProjects: function(){

          var app = this; app.id = XXXX; app.Username= XXXX;

          const instance = axios.create({
            timeout: 3000,
            headers: {
                           ......
            }
          });
          instance.get("XXXXX")
            .then( function(response) {
              console.log(response);

              Object.keys(response.data.result).forEach( function (product) {
                console.log(response.data.result[product]);
                console.log('product number: ' + product);

                var subscribersCounter = 0;

                //Save the response required results into a struct. 
                let example = {
                  name: response.data.result[product].name,
                  id: response.data.result[product].id,
                  subscribers: response.data.result[product].subscribers,
                  products: response.data.result[product].products,
                };

                //Create an object for the current Project.
                let uploadedExample = {
                  name: '',
                  id: '',
                  subscribers: '',
                  products: {name:'',color:''},
                };

                uploadedExample.name = example.name; //name of the current workspace.
                uploadedExample.id = example.id; //id of the current workspace.

                //Check if the subscribers empty or not, if not empty count the available subscribers.
                if ( example.subscribers ) {
                  Object.keys(example.subscribers).forEach(function (key) {
                    subscribersCounter++;
                  });
                }

                uploadedExample.subscribers = subscribersCounter; //subscribers No. of the current workspace.
                console.log("Total subscribers: " + uploadedExample.subscribers);

                //Check if the products empty or not, if not empty count the available products.
                if ( example.products ) {
                  Object.keys(example.products).forEach(function (Pkeys) {
                    uploadedExample.products.name = Pkeys; //name of the product in the current workspace.
                    Object.keys(example.products[Pkeys]).forEach(function (key) {
                      if (key == 'color') {
                        uploadedExample.products.color = example.products[Pkeys][key]; //color of the product in the current Project.
                      }
                    });
                  });
                }

                //add the new workspace to the list of Projects.
                app.Projects.push(uploadedExample);

              });

            })
            .catch(function(error) {
              console.log(error);
            });


        }
      }
    }

在<tamplete> ：

<b-col v-for="(project,index) in Projects" :key="index">
            <b-row><h1> {{project.name}} </h1></b-row>
..........

我所做的是：

当页面加载时，为当前用户获取所有项目的过程正在工作，并将它们打印在屏幕上。 当用户尝试添加新项目时，它会成功完成。 唯一的事情是当他添加我想发送 HTTP 请求的项目时，同时将这个项目添加到打印在屏幕上的列表中，而无需用户刷新页面。

注意：我使用了location.reload(); 但不是我想要的。

注意：我需要从 HTTP 请求中获取所有项目，因为我需要一些数据来处理它们，因此将项目名称添加到要打印在屏幕上的项目数组对我没有帮助。

Answer 1

当您创建一个新项目时，应用程序中现有项目的列表不会神奇地更新以包含新创建的项目。 您必须在请求成功后手动将新项目添加到列表中，或者您可以通过再次获取所有项目来刷新整个列表（与您最初在页面加载时执行的操作相同）。 您不应该像location.reload()那样硬刷新页面。

用于创建新项目的 HTTP API 应该响应一个项目对象，然后您可以以前端处理所需的任何方式对其进行转换，然后将其附加到数组中。

只需确保您没有在“获取所有项目”和“新建项目”操作之间复制任何数据处理代码。