时间戳

首页 > 解决方案 > 我无法显示注册数据

vue.js - 我无法显示注册数据

问题描述

我在vue.js中做了一个CRUD，但是在cdn中，只是在文件中导入vue。我想使用 vue 项目使这个 crud 工作。我创建了这个项目，安装了 axios，将建立连接并具有创建、读取、更新和删除方法的 php 文件放在 xampp 中。但它没有在页面上显示任何内容。它在表格中有数据并且什么也没有显示。

这是完整的组件：

<template>
   <div class="projects">
      <h1>Projects</h1>

      <div v-for="project in projects" v-bind:key="project.id">
        <p>
         id: {{ project.id }}
        </p>
      </div>
    </div>
</template>

<script>
  export default {
    name: "HelloWorld",
    data() {
      return {
        errorMsg: "",
        successMsg: "",
        projects: [],
        newProject: {
          title: "",
        },
        currentProject: {},
      };
    },
    mounted: function () {
      this.getAllProjects();
    },
    methods: {
      getAllProjects: function () {
        this.axios
          .get("http://localhost/project/action.php?action=read")
          .then(function (response) {
             if (response.data.error) {
               this.errorMsg = response.data.message;
             } else {
               this.projects = response.data.projects;
             }
         });
       },
       addProjects() {
         var formData = this.toFormData(this.newProject);

         this.axios
           .post("http://localhost/project/action.php?action=create", formData)
           .then(function (response) {
             this.newProject = {
               title: "",
             };
           if (response.data.error) {
             this.errorMsg = response.data.message;
           } else {
             this.successMsg = response.data.message;
             this.getAllProjects();
           }
        });
      },
      updateProject() {
        var formData = this.toFormData(this.currentProject);

        this.axios
          .post("http://localhost/project/action.php?action=update", formData)
          .then(function (response) {
            this.currentProject = {};
            if (response.data.error) {
              this.errorMsg = response.data.message;
            } else {
              this.successMsg = response.data.message;
              this.getAllProjects();
            }
          });
      },
      deleteProject() {
        var formData = this.toFormData(this.currentProject);

        this.axios
         .post("http://localhost/project/action.php?action=delete", formData)
         .then(function (response) {
           this.currentProject = {};
           if (response.data.error) {
             this.errorMsg = response.data.message;
           } else {
            this.successMsg = response.data.message;
            this.getAllProjects();
           }
        });
      },
      toFormData(obj) {
        var fd = new FormData();
        for (var i in obj) {
          fd.thisend(i, obj[i]);
        }
        return fd;
      },
      selectUser(project) {
        this.currentProject = project;
      },
    },
  };
</script>

对不起，如果我没有把它格式化好。请帮助我，我真的需要这样做。

标签： vue.js

解决方案

在您的代码中，您可以添加此 COMPUTED 属性： (placement: data(){...},computed:{...},methods....)

mounted: function () {
  ...
},
computed: {
  projectsList(){
    return this.projects /*your array from data()*/
  }
},
methods: {...

您可以尝试在 中使用projectsList，v-for例如v-for="project in projectsList"

推荐阅读