Question

写了很多其他文章后，我感到非常疲倦。我正在使用Vue。以下代码写在vue文件的脚本部分中。我从文件中获取一个json，然后读取json中的值，然后根据员工级别和应用程序状态设置应显示的按钮。有没有更好的方法可以更改Vue中的按钮显示状态？

if (
      (this.GLOBAL2.jsonForGlobal.employeeLevel == "1" &&
        (this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Checking" ||
          this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Pending" ||
          this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Approved")) ||
      (this.GLOBAL2.jsonForGlobal.employeeLevel == "2" &&
        (this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Pending" ||
          this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Approved")) ||
      (this.GLOBAL2.jsonForGlobal.employeeLevel == "3" &&
        this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Approved")
    ) {
      this.pullDisplay = true;
    } else {
      this.pullDisplay = false;
    };

    if (
      this.GLOBAL2.jsonForGlobal.employeeLevel == "1" &&
      this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Revising"
    ) {
      this.cancelDisplay = true;
    } else {
      this.cancelDisplay = false;
    };

    if (
      (this.GLOBAL2.jsonForGlobal.employeeLevel == "1" &&
        this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Revising") ||
      (this.GLOBAL2.jsonForGlobal.employeeLevel == "2" &&
        this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Checking") ||
      (this.GLOBAL2.jsonForGlobal.employeeLevel == "3" &&
        this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Pending")
    ) {
      this.saveDisplay = true;
    } else {
      this.saveDisplay = false;
    };

    if (
      this.GLOBAL2.jsonForGlobal.employeeLevel == "1" &&
      this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Revising"
    ) {
      this.reviseDisplay = true;
    } else {
      this.reviseDisplay = false;
    };

    if (
      (this.GLOBAL2.jsonForGlobal.employeeLevel == "2" &&
        this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Checking") ||
      (this.GLOBAL2.jsonForGlobal.employeeLevel == "3" &&
        this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Pending")
    ) {
      this.sendDisplay = true;
    } else {
      this.sendDisplay = false;
    };

    if (
      (this.GLOBAL2.jsonForGlobal.employeeLevel == "3" &&
        this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Pending") ||
      (this.GLOBAL2.jsonForGlobal.employeeLevel == "2" &&
        this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Checking")
    ) {
      this.approvalDisplay = true;
    } else {
      this.approvalDisplay = false;
    };

还有一些需要三个条件：

    if (
      this.GLOBAL2.jsonForGlobal.employeeLevel == "3" &&
      this.GLOBAL2.jsonForGlobal.detail[this.detailId].requestCategory ==
        "External Request" &&
      this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus ==
        "Pending"
    ) {
      this.returnDisplay = true;
    } else {
      this.returnDisplay = false;
    }

Answer 1

如果经常使用属性，则有必要引入一个局部变量以对其进行清理：

 const { employeeLevel, detail: { [this.detailId]: { currentStatus }}} = his.GLOBAL2.jsonForGlobal;

第二，您不需要if / else，只需分配布尔值即可：

  this.pullDisplay = (
     employeeLevel == "1" && ["Checking", "Pending", "Approved"].includes(currentStatus) || 
     employeeLevel == "2" && ["Pending", "Approved"].includes(currentStatus) ||
     employeeLevel == "3" && currentStatus == "Approved"
)

Answer 2

采用基于配置的方法将使您的代码更易于编辑和阅读。

const levels = {
  '1': {
    pullDisplayStatus: ['Checking', 'Pending', 'Approved'],
    cancelDisplayStatus: ['Revising'],
    saveDisplayStatus: ['Revising'],
    reviseDisplayStatus: ['Revising'],
    sendDisplayStatus: [],
    approvalDisplayStatus: [],
  },
  '2': {
    pullDisplayStatus: ['Pending', 'Approved'],
    cancelDisplayStatus: [],
    saveDisplayStatus: ['Checking'],
    reviseDisplayStatus: [],
    sendDisplayStatus: ['Checking'],
    approvalDisplayStatus: ['Checking'],
  },
  '3': {
    pullDisplayStatus: ['Approved'],
    cancelDisplayStatus: [],
    saveDisplayStatus: ['Pending'],
    reviseDisplayStatus: [],
    sendDisplayStatus: ['Pending'],
    approvalDisplayStatus: ['Pending'],
  },
}

const jsonForGlobal = this.GLOBAL2.jsonForGlobal;
const currentStatus = jsonForGlobal.detail[this.detailId].currentStatus;
const level = levels[jsonForGlobal.employeeLevel];
this.pullDisplay = level.pullDisplayStatus.indexOf(currentStatus) > -1;
this.cancelDisplay = level.cancelDisplayStatus.indexOf(currentStatus) > -1;
this.saveDisplay = level.cancelDisplayStatus.indexOf(currentStatus) > -1;
this.reviseDisplay = level.reviseDisplayStatus.indexOf(currentStatus) > -1;
this.sendDisplay = level.reviseDisplayStatus.indexOf(currentStatus) > -1;

有没有更好的方法来更改javascript / Vue中的按钮显示？

2 个答案: