0

如果该值在方法中返回 true，则尝试呈现 v-alert。目前，什么都没有显示，我错过了什么？

我的代码：

     <v-container> 
             <v-row style="margin:0px;">
          <template v-if="isTestBusy()">
                            <v-alert type="info" color="#fb8c00" style="font-size: 14px;">
                              test initiated, waiting for test results
                            </v-alert>
                          </template>
                        </v-row>
          </v-container>
    
    mounted () {

  this.pingTimer = setInterval(async function () {
      that.pendingTests = await new Promise(function (resolve) {
        resolve(utils.getPendingTests(that.accountnumber, that.testType))
      })    
    var arrayLength = that.pendingTests.Table1.length;
          for (var i = 0; i < arrayLength; i++) {
            if (that.pendingTests.Table1[i].DiaType === that.pgType) {
              that.isTestBusy(that.pendingTests.Table1[i].CPEId)
            }
    
          }      
        }, 5000)
    
    },
    
    methods : {
    
       isTestBusy(cpe) {
          try {
            let tmp = this.pendingTests.Table1
           // console.log(tmp)
            let retVal = tmp.find(x => x.CPEId === cpe && x.DiaType === this.pgType).Step2ResponseCode
            //console.log(retVal)
            let retValRes = tmp.find(x => x.CPEId === cpe && x.DiaType === this.pgType).Step4Result
             //console.log(retValRes)
            if (retVal === 0) {
              return true
            }
            if ((retVal === 200) && (retValRes === '')) {
              return true
            }
            return false
          } catch (error) {
            return false
          }
        },
    
    }

只是方法和安装的额外信息正在工作。它只是 HTML 部分，我不确定要渲染它到底需要做什么。

4

2 回答 2

0

v-alert有自己的value属性可以做到这一点，你不需要templatewith v-if。尝试这个：

<v-alert type="info" color="#fb8c00" style="font-size: 14px;" :value="isTestBusy()" transition="scale-transition">
      test initiated, waiting for test results
</v-alert>

你也需要调用你的方法。如果您watch:在表更改时使用并调用您的方法并在您的内部创建一个布尔变量data()并将您的方法的返回值放入其中并让您的警报value属性使用它，这可能是最好的。（并且 Vue 将对内部定义的变量的更改做出反应data）。这样做：

<v-alert type="info" color="#fb8c00" style="font-size: 14px;" :value="busy" transition="scale-transition">
      test initiated, waiting for test results
</v-alert>

data() {
busy: false,
}

watch: {
  pendingTests: {
     deep: true,
     handler: function(val) {
        //put some if here to match your situation and then  call your method like:
        this.busy = this.isTestBusy(yourParams)   
     }
  },
}

methods : {
    
       isTestBusy(cpe) {
          try {
            let tmp = this.pendingTests.Table1
           // console.log(tmp)
            let retVal = tmp.find(x => x.CPEId === cpe && x.DiaType === this.pgType).Step2ResponseCode
            //console.log(retVal)
            let retValRes = tmp.find(x => x.CPEId === cpe && x.DiaType === this.pgType).Step4Result
             //console.log(retValRes)
            if (retVal === 0) {
              return true
            }
            if ((retVal === 200) && (retValRes === '')) {
              return true
            }
            return false
          } catch (error) {
            return false
          }
        },
    
    }

可选：如果需要，我建议您也使用该transition属性。v-alert它只是让它看起来更好。

于 2020-09-02T11:20:57.073 回答
0

解决它：

    <v-alert type="info" color="#fb8c00" style="font-size: 14px;" v-if="isTestBusy" transition="scale-transition">
                      test initiated, waiting for test results
                </v-alert>
                
                data () {
                 return {
                   isTestBusy: false
                
                }
                },
                
                    mounted () {
                
                  this.pingTimer = setInterval(async function () {
                      that.pendingTests = await new Promise(function (resolve) {
                        resolve(utils.getPendingTests(that.accountnumber, that.testType))
                      })    
                    var arrayLength = that.pendingTests.Table1.length;
                          for (var i = 0; i < arrayLength; i++) {
                            if (that.pendingTests.Table1[i].DiaType === that.pgType) {
                              that.isTestBusy(that.pendingTests.Table1[i].CPEId)
                            }
                    
                          }      
                        }, 5000)
                    
                    },
                
methods : {
 isTestBusy(cpe) {
   try {
    let tmp = this.pendingTests.Table1
    // console.log(tmp)
let retVal = tmp.find(x => x.CPEId === cpe && x.DiaType === this.pgType).Step2ResponseCode
    //console.log(retVal)
         let retValRes = tmp.find(x => x.CPEId === cpe && x.DiaType === this.pgType).Step4Result
                    //console.log(retValRes)
                  if (retVal === 0) {
                  this.busyPingTest = true
                   return true
                  }
                  if ((retVal === 200) && (retValRes === '')) {
                  this.busyPingTest = faslse
                  return true
                   }
                  return false
                   } catch (error) {
                  return false
                  }
                  },
                    
                  }
于 2020-09-04T09:24:34.543 回答