Vue怎么让数据请求成功以后再渲染页面?

需求如下:

进入页面有一个检测按钮,点击即可向后端请求数据。

进入页面如果不点击检测

则显示如下

image.png

点击检测 如果返回的是正常的状态则显示

image.png

如果返回的状态是异常 则显示

image.png

目前有个BUG 就是点击检测的时候 先从image.png变为image.png 然后马上变为image.png 因为逻辑里面我是用

v-if v-else 来判断

未知(没有点击的状态)

正常,异常(按钮点击过后根据返回的布尔值判断)

下面贴一下代码:

        <el-form-item label="Prometheus状态" label-width="150px">
        <span v-if="!isClickCheck">
        <el-tag size="mini" type="info">未知</el-tag>
        </span>
        <span v-else >
        <el-tag
        size="mini"
        :type="isPrometheusOn?'success':'danger'"
        effect="plain"
        >{{isPrometheusOn?"正常":"异常"}}</el-tag>
        <el-button
        @click="operation('startPrometheus','prometheusStartLoading')"
        type="plain"
        size="mini"
        v-show="!isPrometheusOn"
        :loading="prometheusStartLoading"
        >启动</el-button>
        </span>
        </el-form-item>
                

data中的数据如下

  isClickCheck: false,
  isPrometheusOn: false,

写的有点僵硬 有没有大佬自告奋勇帮我优化一下?

年底了 没有去eleme的名额了,回答此问题者,可以推荐去腾讯大厦。。。。当门卫

阅读 910
评论
    2 个回答

    不管是if,else还是其他的判断,其实都只能展示两种状态,而需求显然不止两种状态,判断做起来就不适用,所以需要定义一个变量来展示最终的结果,给个默认值,等待结果后再改变状态:比如

    …………
    data:{
        msg:'未知'
    }
    …………
    ajax.then(res=>{
        this.msg = res.type;
    })
    …………
    

      试试
      this.$nextTick(()=>{

      })

        撰写回答

        登录后参与交流、获取后续更新提醒