Vuetify v-alert尝试在方法值返回true时呈现

Question

如果值在方法中返回true，则尝试呈现v警报。目前，什么都没显示，我想念什么？

我的代码：

     <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部分，我不确定究竟需要执行什么才能使其呈现。

Answer 1

v-alert具有其自己的value属性，您无需使用template和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一起使用。它只会使它看起来更好。

Answer 2

已解决：

    <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
                  }
                  },
                    
                  }