javascript - 同步动态列表中的问题与来自服务器的请求列表(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 应该以一个项目对象作为响应，然后您可以按照前端处理所需的任何方式进行转换，然后将其附加到数组中。

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