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

Question

需求如下：

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

进入页面如果不点击检测

则显示如下

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

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

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

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的名额了，回答此问题者，可以推荐去腾讯大厦。。。。当门卫

Answer 1

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

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

Answer 2

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

})