项目实训记录（三）——axios通信导致vue前端数据不一致

目录

一、最近做了什么？

1.主要记录一下四月底到五月初做了什么，以及遇到的一些问题。

二、遇到的问题和解决办法

1.axios通信导致vue前端错误

2.界面展示——v-if的使用

---

一、最近做了什么？

1.主要记录一下四月底到五月初做了什么，以及遇到的一些问题。

1.1 这段时间主要还是用户端的前端书写和后端逻辑的书写。我主要负责用户端申请信息的展示以及申请详情的展示。

1.2 申请信息展示部分：

      根据申请的标志字段分为全部、通过、未通过、未审核等tab展示。不同状态申请的界面也有不同（如何实现在全部申请显示时，不同状态申请展示情况不同也会在下面讲一下）。

1.3 申请信息详情部分：

      主要涉及查看密钥和失效时间的逻辑。这个逻辑比较复杂，也涉及并修改了许多数据库信息。也就是这里axios通信出了一些问题，导致毫无逻辑的前端错误。下面会详细说。

二、遇到的问题和解决办法

1.axios通信导致vue前端错误

界面如下：

代码如下（查看详情方法，展示上面图片的信息）：

getDetails(pid,id){
      if(pid < 0){
        this.$message.error('该申请对应发布已被删除！');
      }
      else{
      console.log(id+"id-----------")
      
            //先显示失效时间
           this.getShiXiaoTime(id);
        
            axios.get(`api/getApplicationDetail/${id}`).then(res=>{
            console.log(res.data)
            this.formData = res.data;
            if(this.formData.application.apg =&