首页 博客正文

vue 改变data数据后,数据变化页面不刷新

麦洛 博客 2020-07-30 17:07:16 150 0
双十一,阿里云钜惠服务器,欢迎选购 双十一,阿里云钜惠服务器,欢迎选购!

High mountain in morning time. Beautiful natural landscape

一  开发环境

"vue": "^2.6.10"
"element-ui": "^2.11.1"

二 翻车现场

首先我们来看下要实现的需求,其实就是一个条件渲染

但是当我改变data中的from.status的值时,页面并没有跟随刷新。对应form表单数据我是在mounted钩子函数中获取的

    mounted() {
    this.getDataList()
   },

于是我紧着这百度了这个问题,大致都是以下类似的方案

但是当我按照博客的方式去修改我的问题,并没有效果

三 解决方案

大家对比我截取的第一张图,会发现我在外面增加了<template> <el-container>标签包裹了我的业务代码,神奇的事情发生了,我的问题解决了

但是我不并不知道element-ui在底层为我做了什么,哈哈

<template>
 <el-container style="height:100%; border: 1px solid #eee;">
   <el-container size="medium" direction="vertical" >

       <div class="hintAlertBox" v-if="form.status == '0'">
         <div class="content">
           <img src="@/assets/img/hint2.png" alt="">
           <div class="hintText"></div>
           <div class="btnArr even">
             <button class="redact" @click="routerToEditor"></button>
             <button @click="routerToPreview"></button>
           </div>
         </div>
       </div>
     <div class="hintAlertBox" v-if="form.status == '1'">
       <div class="content">
         <img src="@/assets/img/hint3.png" alt="">
         <div class="hintText"><span></span><i class="audit"></i></div>
         <div class="btnArr odd">
           <button @click="routerToPreview"></button>
         </div>
       </div>
     </div>
     </el-container>
 </el-container>
</template>



版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

本文链接:https://ruankaoti.com/post/64.html

评论

微信扫码,获取更多

微信扫码进入小程序,获取更多软考资料