请问使用v-if下报变量不存在出错如何解

心悦琴
  • 67

image.png
image.png
想要实现点击修改项目成员就会在右上角出现删除的图标,可是现在是这样。。。
image.png
我明明已经定义了isChange
image.png
求解求解。

<template>
  <layout :msg="menuSelected">
  <div id="layout-inner">
<!--    <div>u_identity:{{this.u_identity}}</div>-->
    <a-breadcrumb style="margin:0;margin-top:10px;margin-left:16px;text-align: left">
      <a-divider type="vertical"
                 style="background-color: #FF944B;display:inline-block;width: 3px;border-radius: 8px"/>

        <router-link :to="{ path: '/projectManagement'}" v-if="u_identity===1">
          <a-breadcrumb-item>项目管理</a-breadcrumb-item>
        </router-link>
        <router-link v-else :to="{ path: '/readAllProject'}">
          <a-breadcrumb-item>项目中心</a-breadcrumb-item>
        </router-link>
        <a-breadcrumb-item>查看项目信息</a-breadcrumb-item>




    </a-breadcrumb>

    <a-layout-content
        :style="{ margin: '13px 16px', background: '#fff', minHeight: '520px' }"
    >
      <div id="content">
        <div id="contentHeader">

          <img src="../../../icons/icon.png" alt="icon.png" class="cardIcon"
               :style="{display:'inline-block'}">
          <span class="cardTitle" v-if="this.flag===null" :style="{fontSize:'18px'}">
            {{ this.record.pName }}
          </span>

          <a-form-model ref="record" :model="record" :rules="rules" >
            <a-form-model-item has-feedback v-if="this.flag===false"  prop="pName">
              <a-input v-model="record.pName"  type="text"
                       :style="{width:'260px'}">
              </a-input>
            </a-form-model-item>
          </a-form-model>





          <button
                    v-if="this.flag===null&&this.$store.getters.userName===this.record.uName"
                    class="endProject"
                    @click="edit"
                     >
            修改项目信息
          </button>
          <a-popconfirm
              title="确定结束该项目?"
              ok-text="确定"
              cancel-text="取消"
              @confirm="confirm"
              @cancel="cancel"
          >
            <button v-if="this.record.pState===0&&this.$store.getters.userName===this.record.uName" class="endProject">
              结束项目
            </button>
          </a-popconfirm>


          <a-divider :style="{marginTop:'5px',marginBottom:'10px'}"/>

          <div id="headerInner">
            <img src="../../../assets/images/project.png" alt="project.png" height="116" width="116"
                 :style="{margin:'0px'}"/>

            <div id="textPart">
              <div class="part">
                <div  class="partTitle">项目成员</div>
                <br/>
                <div class="partContent">{{ this.MemberNum }}</div>
              </div>

              <div class="part">
                <div class="partTitle">剩余工期</div>
                <br/>
                <div class="partContent" style="color:#D28B17">{{ this.RemainTime }}</div>
              </div>

              <div class="part">
                <div  class="partTitle">项目状态</div>
                <br/>
                <div class="partContent" v-if="this.record.pState ===0" style="color:#3C8824">
                  进行中
                </div>

                <div class="partContent" v-if="this.record.pState===1" style="color:red">
                  已结束
                </div>

              </div>

              <a-divider type="vertical" :style="{height:'auto',marginRight:'0px',paddingRight:'0px'}"/>

              <div id="innerRight">
                <ul>
                  <li>
                    <div class="liPart">

                      <label class="label">项目类型:</label>

                      <span class="labelContent" v-if="this.record.pType===0&&this.flag===null">
                        其他类型
                      </span>

                      <span class="labelContent" v-else-if="this.record.pType===1&&this.flag===null">
                        开发类
                      </span>

                      <span class="labelContent" v-else-if="this.record.pType===2&&this.flag===null">
                        算法类
                      </span>


                      <a-form-model-item has-feedback v-if="this.flag===false" :model="record" :rules="rules.pType" prop="pType">
                      <a-select v-model="record.pType" :style="{minWidth:'100px',marginRight:'30px'}">
                        <a-select-option :value=1>
                          开发类
                        </a-select-option>
                        <a-select-option :value=2>
                          算法类
                        </a-select-option>

                        <a-select-option :value=0>
                          其他
                        </a-select-option>
                      </a-select>

                      </a-form-model-item>

                    </div>
                    <div class="liPart">
                      <label class="label">负责人:</label>
                      <span class="labelContent">{{ this.record.uName }}</span>
                    </div>

                  </li>






                  <li>
                    <div class="liPart">
                      <label class="label">项目工期:</label>
                      <span class="labelContent">{{ this.ProjectTime }}天</span>
                    </div>

                    <div class="liPart">
                      <label class="label" :style="{display:'inline-block'}">负责人联系方式:</label>
                      <span class="labelContent" v-if="this.flag===null">{{ this.record.pPhone }}</span>
                      <a-form-model ref="record" :model="record" :rules="rules" >
                      <a-form-model-item has-feedback v-if="this.flag===false"  prop="pPhone">

                        <a-input v-model="record.pPhone"
                               :style="{width:'150px',display:'inline-block'}">

                      </a-input>
                      </a-form-model-item>
                      </a-form-model>
                    </div>


                  </li>

                  <li>
                    <div class="liPart" style="margin-right: 30px;">
                      <label class="label">开始日期:</label>
                      <span class="labelContent" v-if="this.flag===null">{{ this.record.pStart|formatDate }}</span>


                      <a-form-model ref="record" :model="record" :rules="rules">
                        <a-form-model-item has-feedback v-if="this.flag===false" prop="pStart">
                        <a-date-picker  v-model="record.pStart"
                                       @change="onChangeStartDate"
                                        :style="{width:'140px'}"/>
                        </a-form-model-item>
                      </a-form-model>

                    </div>
                    <div class="liPart">
                      <label class="label">截止日期:</label>
                      <span class="labelContent" v-if="this.flag===null">{{ this.record.pEnd|formatDate }}</span>
                      <a-form-model ref="record" :model="record" :rules="rules">
                        <a-form-model-item has-feedback v-if="this.flag===false" prop="pEnd">
                        <a-date-picker v-model="record.pEnd"
                                       @change="onChangeEndDate"
                                       :style="{width:'140px'}"/>
                        </a-form-model-item>
                      </a-form-model>
                    </div>
                  </li>

                  <li v-if="this.record.pRace!==null">
                    <div class="liPart">
                      <label class="label">比赛名称:</label>
                      <span class="labelContent" v-if="this.flag===null">{{this.record.pRace}}</span>
                      <a-form-model-item has-feedback v-if="this.flag===false">
                      <a-input v-model="record.pRace"  :style="{width:'280px'}"></a-input>
                      </a-form-model-item>
                    </div>

                  </li>

                  <li>
                    <div class="liPart">
                      <label class="label">奖金:</label>
                      <span class="labelContent" v-if="this.flag===null"> {{ this.record.pMoney }}</span>
                      <a-form-model-item has-feedback v-if="this.flag===false" :rules="rules.pMoney" prop="pMoney">
                        <a-input v-model="record.pMoney" :style="{width:'120px'}">

                        </a-input>
                      </a-form-model-item>
                    </div>
                    <div class="liPart">
                      <label class="label">奖项:</label>
                      <span class="labelContent" v-if="this.flag===null">{{ this.record.pAward }}</span>

                      <a-form-model-item has-feedback v-if="this.flag===false" :rules="rules.pAward" prop="pAward">
                        <a-input v-model="record.pAward" :style="{width:'120px'}">

                        </a-input>
                      </a-form-model-item>
                    </div>
                  </li>


                </ul>
              <div v-if="this.flag===false">
                <a-button type="primary" @click="updateProjectByLeader" :style="{float:'right'}">保存</a-button>
                <a-button type="primary" @click="handleCancel" :style="{float:'right'}">取消</a-button>
              </div>
              </div>





            </div>
          </div>
        </div>

        <div id="formContent" :style="{paddingTop:'5px'}">
          <a-card
              style="width:100%;,backgroundColor:'#FBFBFB'"

              :headStyle="{fontWeight:'bold',paddingTop:'0px'}"
              :bordered="false"
              :tab-list="tabListNoTitle"
              :active-tab-key="noTitleKey"
              @tabChange="key => onTabChange(key, 'noTitleKey')"
          >

            <span v-if="noTitleKey === 'projectMember'">
            <a-button type="primary" @click="changeProjectMember" v-if="this.isChange===null&&this.record.pState===0&&this.$store.getters.userName===this.record.uName"
                      :style="{marginTop:'0px',marginBottom:'10px'}">
              修改项目成员
            </a-button>


            <template>

                <a-row :gutter="20">
                  <a-col :span="4" v-for="(val,key) in projectMembers " :key="key">
                    <a-card  :bordered="true"  :headStyle="{borderBottom:'0px'}"
                             :bodyStyle="{padding:'0px'}"
                             :style="{marginTop:'15px'}">
                      <div  v-if="this.isChange===true">
                        <a-icon
                            type="minus-circle"
                            @click="deleteProjectMember(key)"
                            :style="{color:'red',float:'right'}"/>
                      </div>

                      <img src="../../../assets/images/avatar.jpg" alt="avatar.jpg" class="avatar"/>
                      <div class="memberName">

                            {{ val.uName }}

                      </div>
                    </a-card>

                  </a-col>
                  <a-col :span="4"  v-show="this.isChange===true">
                    <div @click="toAddProjectMember"
                         style="cursor:pointer;
                         background-color:transparent;
                                margin-top:15px;
                                border:dotted 2px rgba(0, 0, 0, 0.65);
                                width:140px;
                                height:160px">
                      <a-icon type="plus" :style="{fontSize:'140px',color:'rgba(0, 0, 0, 0.35)'}"/>
                    </div>
                  </a-col>


                </a-row>

            </template>

              <a-modal v-model="visible" title="添加项目成员" @ok="addProjectMember">

                 <a-form-model-item has-feedback label="项目成员" ref="member" prop="member">

                  <a-select
                      show-search
                      mode="multiple"
                      :size="size"
                      placeholder="请选择项目成员"
                      option-filter-prop="children"
                      style="width: 400px"
                      @change="handleChange"
                  >


              <a-select-option
                  v-for="(val,key) in allMembers " :key="key">
                {{val.uName}}
              </a-select-option>


            </a-select>




              </a-form-model-item>





              </a-modal>




            </span>

            <span v-if="noTitleKey === 'projectBrief'">
              <a-button type="primary" v-if="this.u_identity===0&&this.record.pState===0&&this.fflag===null&&this.$store.getters.userName===this.record.uName"
                        @click="editPIntroduction"
                        :style="{marginTop:'0px',marginBottom:'10px'}">
              修改项目简介
            </a-button>

              <ckeditor v-if="this.fflag===null" :read-only=true v-model="record.pIntroduction" type="inline"></ckeditor>

              <a-form-model ref="record" v-if="this.fflag===false" :model="record" :rules="rules">

                <a-form-model-item  has-feedback  ref="projectBrief" prop="pIntroduction"
                                    :wrapper-col="{span:'200'}">
                    <ckeditor v-model="record.pIntroduction" v-if="this.fflag===false" :style="{width:'900px'}"></ckeditor>
                </a-form-model-item>

              </a-form-model>

              <div :wrapperCol="{span:'24'}" v-if="this.fflag===false" :style="{textAlign:'center',paddingTop:'20px'}">
          <a-button
              class="saveButton"
              :style="{borderColor:'#79A0F1',color:'#79A0F1',marginRight:'30px'}"
              type="submit"
              @click="updatePIntroduction">
            保存
          </a-button>


          <a-button
              class="saveButton"
              :style="{borderColor:'#79A0F1',color:'#79A0F1',marginRight:'30px'}"
              @click="resetForm('record.pIntroduction') ">
            重置
          </a-button>
        </div>


            </span>

          </a-card>
        </div>

      </div>
    </a-layout-content>
  </div>
  </layout>
</template>

<script>
import layout from "@/layout/index"
import {getProjectsDetails} from "@/api/project"
import {formatDate} from "@/utils/date";
import {showProjectTime} from'@/api/project'
import {validMobile} from "@/utils/validate";
import {showProjectRemainTime,addProjectMember,deleteProjectMember} from "@/api/project"
import {getProjectMemberNum,updatePIntroduction,updateProjectByLeader,endProject,getProjectMember} from "@/api/project"
import {getAllUsersNameExceptMe} from "@/api/user";


export default {
name: "projectDetail",
  data(){
    const validateMobile = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入手机号码'))
      }
      if (!validMobile(value)) {
        return callback(new Error('手机号码格式不正确'))
      }
      callback()
    }

    return{
      ProjectTime:null,
      RemainTime:null,
      MemberNum:null,
      fflag:null,
      isChange:null,
      visible: false,
      changedMember:'',

      size: 'default',
      allMembers: {
        uId:null,
        uName:''
      },

      projectMembers: {
        uName:''
      },

    flag:null,
    record: { },
    rules:{
      pName: [{ required: true, message: "请输入项目名称",  trigger: 'blur'}],

      pPhone:[
        {
          required: true,
          trigger: "blur",
          validator:validateMobile
        },

      ],
      pStart:[{ required: true, message: "请选择项目开始日期",  trigger: 'blur'}],
      pEnd: [{ required: true, message: "请选择项目截止日期",  trigger: 'blur'}],
      pIntroduction: [{ required: true, message: "请输入项目简介",  trigger: 'blur'}],



    },


    pId:this.$route.query.pId,
    // 1是团队用户,0是管理员
    u_identity:this.$store.state.identity,

    item:{
        // projectType:'veysudbwij',
    },
    tabListNoTitle: [

      {
        key: 'projectMember',
        tab: '团队成员',
      },
      {
        key: 'projectBrief',
        tab: '项目简介',
      },

    ],

    noTitleKey: 'projectMember',
      menuSelected:['2']
  }



  },
  components:{
    layout
  },
  // updated(){
  //   this.showProjectTime()
  //   this.showProjectRemainTime()
  //   this.getProjectMemberNum()
  // },
  mounted() {
    console.log("从项目管理页面传过来的pId:",this.$route.query.pId)
      this.getProjectsDetails()
      this.showProjectTime()
      this.showProjectRemainTime()
    // 剩余工期
      this.getProjectMemberNum()
      this.getProjectMember()
      this.getAllUsersNameExceptMe()

  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd');
    }
  },

  methods: {
    deleteProjectMember(deletedMember){
      console.log("想要删除成员的项目pId:",this.pId)
      console.log("this.projectMembers[0]:",this.projectMembers[0])
      console.log("想要删掉的成员id:",this.projectMembers[deletedMember].uId)
      deleteProjectMember(this.pId,this.projectMembers[deletedMember].uId).then(res=>{
        console.log("删除项目成员的res:",res)
        this.getProjectMember()

        this.getProjectMemberNum()

      })

    },

    getAllUsersNameExceptMe(){
      getAllUsersNameExceptMe().then(res=>{
        console.log("getAllUsersNameExceptMe的res.data:",res.data)
        this.allMembers=res.data
        console.log("this.allMembers:",this.allMembers)

      })
    },


    handleChange(selectedItems) {

      console.log("selectedItems:",selectedItems)
      console.log("selectedItems的长度:",selectedItems.length)
      // console.log("this.allMembers[selectedItems].uId:",this.allMembers[selectedItems].uId)

      const temp = [];
      for(let i=0;i<selectedItems.length;i++){
        const index = selectedItems[i]
        console.log("要传入:",this.allMembers[index])
        temp.push(this.allMembers[index].uId)
      }
      console.log('end temp表示用户的id',temp.toString())
      this.changedMember=temp.toString()
      console.log("this.changedMember:",this.changedMember)
    },


    addProjectMember(){

      console.log("要修改项目成员的pId:",this.pId)
      console.log("要增加的项目成员:",this.changedMember)
      addProjectMember(this.pId,this.changedMember).then(res=>{
        console.log("addProjectMember的res:",res)

        this.getProjectMember()
        this.$message.success('项目成员添加成功');
        this.getProjectMemberNum()

      })


    },

    toAddProjectMember(){
      this.visible=true
    },


    changeProjectMember(){
      this.isChange=true
    },

    getProjectMember(){
      console.log("getProjectMember的pId:",this.pId)
      getProjectMember(this.pId).then(res=>{
        console.log("111111111111getProjectMember的res.data:",res.data)
        this.projectMembers=res.data
        console.log("this.projectMembers[0].uName:",this.projectMembers[0].uName)
      })

    },


    confirm() {
      console.log("要结束的项目pId为:",this.pId);
      endProject(this.pId).then(res=>{
        console.log("endProject的res:",res)

        this.record.pState=1
        console.log("this.record.pState:",this.record.pState)

        this.$message.success('该项目已结束');
      })

    },
    cancel(e) {
      console.log(e);

    },

    getProjectMemberNum(){
      getProjectMemberNum(this.pId).then(res=>{
        console.log("getProjectMemberNum的res.data:",res.data)
        this.MemberNum=res.data.MemberNum
        console.log("this.MemberNum",this.MemberNum)
      })

    },


    showProjectRemainTime(){
      console.log("showProjectRemainTime的pId:",this.pId)
      showProjectRemainTime(this.pId).then(res=>{
        console.log("showProjectRemainTime的res:",res)
        console.log("RemainTime:",res.data.RemainTime)
        this.RemainTime=res.data.RemainTime
        console.log("this.RemainTime:",this.RemainTime)
      })


    },




    resetForm(formName) {
      this.$refs[formName].resetFields();

    },
    editPIntroduction(){
        console.log("我要修改项目简介")
        this.fflag=false
    },
    updatePIntroduction(){
      console.log("this.record.pIntroduction:",this.record.pIntroduction)
      console.log("updatePIntroduction的pId:",this.pId)

      updatePIntroduction(this.pId,this.record.pIntroduction).then(res=>{
        console.log("updatePIntroduction的res:",res)
        this.fflag=null

      })

    },



    onChangeStartDate(date, dateString) {
      console.log("开始日期:",dateString);
      this.record.pStart=dateString
      console.log("this.record.pStart:",this.record.pStart)
    },

    onChangeEndDate(date, dateString) {
      console.log("截止日期:",dateString);
      this.record.pEnd=dateString
      console.log("this.record.pEnd:",this.record.pEnd)

    },




    updateProjectByLeader(){
      console.log("修改过的项目名称:",this.record.pName)
      console.log("修改过的项目record:",this.record)

      this.$refs.record.validate(valid => {
        if (valid) {

          updateProjectByLeader(this.record).then(res=>{
            console.log("updateProjectByLeader的res:",res)
            if(res.code === 0) {
              this.$message.success('修改成功');
              console.log("this.pId:",this.pId)
              this.flag=null
              this.getProjectsDetails()
              this.showProjectTime()
              this.showProjectRemainTime()
              this.getProjectMemberNum()
            }
            // eslint-disable-next-line no-unused-vars
          }).catch((error)=>{
            this.$message.msg;
          })

        } else {
          alert('请正确填写相关信息')
        }
      });







    },
    handleCancel(){
      console.log("你点击了取消修改项目信息的按钮")
      this.flag=null

    },

    edit(){
      console.log('1111',this.flag)
      this.flag=false;
      console.log("this.flag:",this.flag)
    },



    showProjectTime(){

        // console.log("showProjectTime的pId:",this.pId)
        showProjectTime(this.pId).then(res=>{
          // console.log("showProjectTime的res:",res)
          this.ProjectTime=res.data.ProjectTime
          // console.log("this.ProjectTime:",this.ProjectTime)
        })

    },



    getProjectsDetails(){
      console.log("现在的pId:",this.pId)
      getProjectsDetails(this.pId).then(res=>{
        console.log("res:",res)
        console.log("getProjectsDetails的res.data:",res.data)
        this.record=res.data
        console.log("this.record:",this.record)
        this.record.pStart=/\d{4}-\d{1,2}-\d{1,2}/g.exec(res.data.pStart)[0]
        this.record.pEnd=/\d{4}-\d{1,2}-\d{1,2}/g.exec(res.data.pEnd)[0]
        console.log("this.record.pStart:",this.record.pStart)
        console.log("this.record.pEnd:",this.record.pEnd)
        console.log("555555555555这个项目的状态:",this.record.pState)






      })


    },

    onTabChange(key, type) {
      console.log(key, type);
      this[type] = key;
    },



  },


  }
</script>

<style scoped>
/*/deep/svg.plusIcon {*/
/*  width: 120px;*/
/*  height: 150px;*/
/*  margin-left: 15px;*/
/*  margin-bottom: 20px;*/
/*  color:rgba(0, 0, 0, 0.35)*/
/*}*/


div#contentHeader{
  box-shadow:#BBBBBB 0px 0px 10px;
  padding:10px 20px;
  margin-bottom: 30px;
  padding-right: 10px;

}

img.cardIcon{
  width:30px;
  height:30px;
  margin:5px
}

span.cardTitle{
  font-size:15px;
  font-weight: bold;
}

div#textPart{
  display: flex;
  margin:10px;
  margin-bottom: 0px;
}

/deep/.ant-form-item{
  margin-bottom: 0;
  display: inline-block;
}


/deep/.ant-form{
  display: inline-block;
}



div#headerInner{
  display: flex;
}

div.part{
  margin:10px;
  margin-bottom: 5px;
  padding-bottom:8px
}

.partTitle{

  font-size: 20px;
}

.partContent{
  font-size: 20px;
   padding: 0px 10px;
  font-weight: bold;
  /* padding-left: 20px; */
  /*padding-top: px;*/
  text-align: center;

}

ul,li{
  list-style: none;
  margin:10px;
  padding:0px;
  margin-top:0px

}

.labelContent{
  margin-right:20px;
  /*font-weight:bold;*/
  font-size:15px
}

.liPart{
  display: inline;
  margin:10px 0px;
  margin-right: 50px;

}

button.endProject{
  float:right;
  background-color: #6791F4;
  color: #FFFFFF;

  border-radius: 10px;
  font-family: 'Source Sans Pro', sans-serif;

  outline: none;

}


.saveButton:hover{
  font-weight: bold;
  box-shadow: 0 10px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);

}

.saveButton:active {
  transform: translateY(4px);
}

button.endProject:hover{
  font-weight: bold;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);

}

button.endProject:active {
  transform: translateY(4px);
}
/* active 设置点击状态时对象沿Y轴平移 */

div#formContent{
  /*box-shadow:#BBBBBB 0px 0px 10px;*/
  padding:10px 5px;
}

img.avatar{
  padding:0px;
  width:80px;
  height:80px;
  border-radius: 100%;
  margin: 20px 30px;
}

div.memberName{
  font-size: 16px;
  text-align: center;
}
#layout-inner{
  text-align: left;
}
</style>

望赐教,不胜感激。

回复
阅读 413
2 个回答

不需要加上 this。直接 v-if="isChange"

Cannot read property 'isChange' of undefined

翻译翻译什么叫undefined,this.isChange里this是undefined。

模板编译又是在当前组件上下文中,isChange就是this.isChange

我替尤雨溪流下遗憾的泪水,写了文档没人看

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏