精华内容
下载资源
问答
  • vue局部刷新数据

    2020-02-13 22:54:22
    可以直接在需要刷新的地方直接调用后台接口的相关函数,刷新数据,优点是速度比较快,不会出现闪白的现象,但是这样做会非常浪费流量,同时接口函数的调用也会使得代码逻辑变乱,可读性减低。 方案二 使用provide/...
    方案一

    可以直接在需要刷新的地方直接调用后台接口的相关函数,刷新数据,优点是速度比较快,不会出现闪白的现象,但是这样做会非常浪费内存,同时接口函数的调用也会使得代码逻辑变乱,可读性减低。

    方案二

    使用provide/inject,具体方法见下例:

    1. 在App.vue文件中,定义全局方法reload():
    <template>
      <div id="app">
        <router-view v-if="isRouterAlive"></router-view>
      </div>
    </template>
    <script>
    export default {
      name: 'App',
      provide () { // 开始:定义reload()方法
        return {
          reload: this.reload
        }
      }, // 结束:定义reload()方法
      data() {
      return {
      	isRouterAlive: true // 定义reload()方法
      	}
      },
      methods: {
      reload() { // 开始:定义reload()方法
      	this.isRouterAlive = false
      	this.$nextTick(() => {
      	  this.isRouterAlive = true
      	  })
      	} // 结束:定义reload()方法
      }
    }
    ......
    </script>
    
    1. 在其他组件中需要刷新的地方使用reload():
    export default {
      name: 'project',
      inject: ['reload'],  // 使用reload()
    },
      methods: {
        patchData() {
          PatchData().then(() => {
            this.reload() // 使用reload()
          }).catch(error => {})
        }
      }
    
    展开全文
  • 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者router.go(0)刷新时,整个...
  • vue 局部刷新某个data元素

    千次阅读 2018-10-21 12:51:06
    <p>{{u_answer.answer_content}} <p>{{u_answer.translate_txt}} ...因此在用户点击某个回答下面的翻译时,就会局部刷新当前点击的dom,将它的回答内容翻译好后,展示在页面。
    <template>
    <div class="icontent">
        <div class="one_question" v-for="question in question_datas">
    	<div v-for="u_answer in question.answer_detail">
    		<div class="new_answer_txt">
    		    <p>{{u_answer.answer_content}}</p>
    		    <p>{{u_answer.translate_txt}}</p>
    		</div>
    		<div class="user_translate" @click="translate_answer(u_answer,u_answer.answer_content)">翻译</div>
    	</div>
        </div>
    </div>
    </template>
    
    <script>
        import axios from 'axios'
        import $ from 'jquery'
        import Vue from 'vue'
        import { getgroupquestion } from '@/api/course'
        import store from '@/store'
    
        export default {
            name: "questions",
            data () {
                return {
                    question_datas: [],
                    question_datas_length: 0,
    		course_id: 0
                }
            },
            methods: {
                getgroupquestioninfo (course_id) {
                    getgroupquestion(course_id).then(response => {
                        var data = response.data
                        this.question_datas = data
                        this.question_datas_length = data.length
                        for (var index in this.question_datas) {
                            this.question_datas[index].translate_txt = ''
                            for (var index2 in this.question_datas[index].answer_detail) {
                                (this.question_datas[index].answer_detail)[index2].translate_txt = ''
                            }
                        }
                    }).catch(error => {
                        console.log(error)
                        this.question_datas = []
                        this.question_datas_length = 0
                    })
                },
                translate_answer (u_answer,answer_content) {
                    console.log(u_answer.translate_txt)
                    var lang = 'zh'
                    for (var index in answer_content) {
                        if (escape(answer_content[index]).indexOf("%u") === 0) {
                            var lang = 'en'
                            break
                        }
                    }
                    if (u_answer.translate_txt === '') {
                        posttranslate(answer_content,lang).then(response => {
                            var data = response.data
                            u_answer.translate_txt = data.translation
                            this.question_datas = Object.assign({}, this.question_datas)
                        }).catch(error => {
                            console.log(error)
                        })
                        // u_answer.translate_txt = '我是翻译'
                        // console.log('ok')
                        
                    } else {
                        u_answer.translate_txt = ''
                        this.question_datas = Object.assign({}, this.question_datas)
                    }
                }
            },
            created: function() {
                this.course_id = store.state.course_id
                this.getgroupquestioninfo(this.course_id)
            },
        }
    </script>
    
    <style scoped>
       
    </style>
    

    本例子的适用场景是:有很多问题question_datas 是从后端请求来的,并且里面含有很多对应的回答,然后需要对这些回答进行翻译。因此在用户点击某个回答下面的翻译时,就会局部的刷新当前点击的dom,将它的回答内容翻译好后,展示在页面。

    展开全文
  • vue局部刷新

    2019-12-13 18:44:07
    vue局部刷新是对数据修改了或者删除了等操作,数据应该显示咱们操作后的状态的,但是重新请求axios是非常消耗内存的,此时应该是组件的局部刷新,那么如何实现vue组件的局部刷新呢?以下讲述了方法,希望可以帮助到...
    • vue局部刷新是对数据修改了或者删除了等操作,数据应该显示咱们操作后的状态的,但是重新请求axios是非常消耗内存的,此时应该是组件的局部刷新,那么如何实现vue组件的局部刷新呢?以下讲述了方法,希望可以帮助到大家。

    一、在 app.vue 中定义全局方法

    <template>
      <div id="app">
        <router-view v-if="isRouterAlive"/>
      </div>
    </template>
    <script>
    export default {
      name: 'App',
      provide(){
        return {
          reload:this.reload
        }
      },
      data(){
        return{
          isRouterAlive: true
        }
      },
      methods: {
       reload () {
         this.isRouterAlive = false
         this.$nextTick(() => (this.isRouterAlive = true))
       }   
     }
    }
    </script>
    
    • 定义了全局 reload() 方法; 原理就是通过控制组件容器的出现与消失,达到重新渲染的效果,从而实现我们的目的。

    二、在全局中定义了刷新的方法, 接下来就是要引入到需要刷新的组件中。

    <script>
    import axios from "axios";
    export default {
      inject:["reload"],
      name: "StoreServiceProjectManagement",
      data() {
        return {
           
        }
      },
      mounted() {
        this.reload();
      }
    };
    </script>
    

    通过 inject 方法引入到需要的组件中, 直接this.reload() 调用这个方法即可。

    展开全文
  • vue中实现局部刷新

    2021-05-19 11:53:54
    后台管理系统一般都会有增删改查等操作,假如一个页面存放八条数据,现在对第三条数据进行变更,变更完成后要刷新数据,有两种方案: 数据变更完成后调用查询列表的接口对整个列表进行刷新; 只刷新数据列表中要...

    某条数据变更后只改变那一条数据,而不是重新加载整个列表

    后台管理系统一般都会有增删改查等操作,假如一个页面存放八条数据,现在对第三条数据进行变更,变更完成后要刷新数据,有两种方案:

    1. 数据变更完成后调用查询列表的接口对整个列表进行刷新;
    2. 只刷新数据列表中要变更的那一条数据,不需要调用查询列表的接口重新加载整个列表;

    虽然两种方法都可以达到目的,但是第一种方法因为要调接口,显然更耗性能,这里着重说一下第二种方法。

    1. 在state中定义一个数组dataList用来存放列表数据,定义一个对象modifyForm用来存放需要变更的数据;
    state:{
    	dataList:[],
    	modifyForm:{}
    }
    
    1. 在vuex中定义一个方法changeDataList用来改变数据,确定变更时调用;
    this.changeDataList(this.modifyForm)
    
    1. 确定变更会将需要变更的那条数据对象提交给vuex,然后找到dataList中原来的那条数据进行更改,这样就可以实现局部刷新了
    changeDataList(state, value) {
    	  var obj = state.dataList.find(item => {
    	    return item.id == value.id;
    	  })
    	  obj.name= value.name;
    	  obj.age= value.age;
    	  obj.province= value.province;
    }
    
    展开全文
  • Vue局部刷新组件

    2021-01-17 19:58:05
    vue局部刷新组件,可以使用provide/inject方法,在App.vue中添加刷新方法,路由初始状态是显示的 1、在template中添加的内容 <template> <router-view v-if="isRouterAlive"></router-view>...
  • 如何利用Vue实现页面的局部刷新

    万次阅读 2018-11-09 14:38:48
    项目里面会分为很多模块,尤其是vue做项目用到嵌套路由的时候,这样很多时候都会用到局部刷新更新数据的需求,找到一篇别人的文章,感觉很好,分享下。 转自:...
  • vue 实现局部组件刷新

    千次阅读 2021-01-07 17:29:14
    vue 项目里想实现组件的局部刷新,我用到过的方法整理了一下: 1、 provide / indect 方法 使用 v-if 方法来控制 router-view 的显示隐藏 在 App.vue 页面 <template> <div id="app"> <router-...
  • vue局部组件刷新

    千次阅读 2020-08-10 18:00:47
    对此我的解决方法是导入成功之后,局部刷新列表组件,原理控制路由的显示隐藏(v-if),由路由的显示隐藏达到组件重新渲染的效果。 首先:我们在App.vue中,定义一个变量(isRouterAlive)为true,控制路由的显示隐藏,...
  • vue局部定时刷新

    2020-06-16 17:11:38
    定时刷新一般都会想到定时器,vue局部定时刷新如下: 一、设置定时器 timer: "",//定时器 //定时器刷新待办事项 this.timer = setInterval(() => { self.reload(); }, 1000); 二、局部刷新 <div class...
  • vue实现局部刷新

    千次阅读 2020-03-09 16:06:47
    情况一、 原生或jquery项目中引入vue.js时的局部刷新 // html <tr v-for="(OrderItem,index) in OrderList" v-if="alive"> ... <td> <span v-if="!OrderItem.isState" buttonCode="CONFIRM" @...
  • Vue中组件局部刷新

    2021-05-26 13:32:26
    在实现组件局部刷新之前先来说一说provide与inject方法。 provide是放在最上层的页面,可以实现传数据给它的子组件和多重孙组件,只需要在子孙组件中用inject接收就可以了。 (2)其他的方法实现页面刷新 this.$...
  • VUE实现页面局部刷新

    千次阅读 2020-10-23 15:56:10
    在我的页面里有使用过三种页面刷新方法,接下来挨个介绍下: 一、当前窗口刷新 window.location.reload() //页面刷新 二、路由切换方式 this.$router.push("需要刷新的页面地址"); //页面刷新 以上两种方式都...
  • response => { endLoading() return response }, error => { endLoading() Message.error(error.response.data) return Promise.reject(error) }) export default axios main.js中引入http.js并绑定在vue上 import ...
  • Vue对比传统模板渲染实现局部刷新

    千次阅读 2018-12-21 21:05:11
    一、dom局部刷新流程 请求后台数据(一般用Ajax)。 将数据加载到template模板。 ...上面第2步中提到的模板渲染框架有很多,例如underscore.js库等...二、Vue实现局部刷新 请求后台数据。 无需进行模板渲染,...
  • Django作为后端,数据库是Mysql,前端为Vue框架,通过Ajax与后端通信,实时请求数据局部刷新网页,将数据实时展示 1. Django 作为后台 创建一个列表,将数据存入列表中,每次从数据库中取最后的数据即最新的数据,将数据...
  • 来源 | https://www.cnblogs.com/tp51/p/14026035.html在做vue项目的过程中有时候会遇到一个问题,就是进行F5页面刷新的时候,页面的数据会丢失...
  • 关于VUE实现页面的局部刷新

    千次阅读 2019-06-30 21:42:22
    实现页面的局部刷新 1、第一步是修改项目中的APP.vue 2、然后在需要进行刷新的页面添加 此时使用相应的组件调用reload方法就可以实现该组件的刷新了。 解决局部刷新时图片不会更新的问题 在更换头像后...
  • Vue实现组件的局部刷新

    千次阅读 2020-05-28 15:46:08
    Vue实现组件的局部刷新通过v-if Vue中我们不可避免的需要调用来自各个方面的组件:奇奇怪怪的组件增加了! 这个时候有个问题:我从后端传来的数据给组件渲染,然而组件却没有更新! 恼火,难道我只能刷新网页才能...
  • vue项目实现局部刷新

    2021-07-24 09:09:14
    于是,我打算将其改成局部刷新。 async upup() { const _this = this; let formdata = new FormData(); formdata.append("aid", _this.$route.query.aid); formdata.append("uid", sessionStorage.getItem(...
  • 使用场景分析,要求提交数据表中修改的某行数据,实时刷新该行数据的状态,该行的某条属性是根据条件渲染的。 el-table部分: <el-table-column label="关联状态" width="100"> <template slot-scope=...
  • vue 中如何对局部组件强制刷新

    千次阅读 2020-12-09 16:25:08
    vue 中如何对局部组件强制刷新1.使用this.$forceUpdate强制重新渲染2.使用v-if指令 使用vue进行开发时,如果要刷新当前路由,则调用router.go(0)方法即可。但是某些情况下,我们可能要求仅仅刷新某个组件,而不是...
  • 在遍历数据时 前端手动增加字段用来暂存点赞或刷新数据 this.list.forEach(element => { if(!element.Praise){ //点赞数量 element.Praise = {Count:0,Data:[]} } if(!element.Comment){ //评论数量及...
  • Vue项目中promise函数实现与后台交互时,发现有些只需要改一个数据的接口,但仍然不得不再次调用查询所有数据接口 当我们只需要更改/切换表格数据中的状态栏时,我们原本的代码是: const request = { ...apis....
  • uniapp中vue强制刷新部分视图数据

    千次阅读 2020-11-23 15:51:22
    uniapp开发的时候经常会遇到想要修改当前数据中的部分数据,控制台输出发现是正确,但是界面显示还是旧数据。 试试 this.$set(obj, key, value);---this.$set(原对象, 数据里的哪一项, 赋值); // 倒计时...
  • vue element 表格懒加载 局部刷新

    千次阅读 2021-01-27 14:04:24
    调用该方法 refreshTable(id){ //获取children的接口 xxx.({id:id}).then((res)=>{ if(res.success){ //使用懒加载的表格加上ref="table" this.$set(this.$refs.table.store.states.lazyTreeNodeMap,...
  • 当render函数重新渲染相关组件,生成新的vdom树,然后vdom和原有的dom进行比较,只实时更新有变化的部分。至此就完成数据驱动的实时局部更新。 另外补充重绘重排和vdom相关的知识:
  • <!-- 角色列表区域 --> <el-table :data="rolelist" border stripe> <!-- 展开列 --> <el-table-column type="expand"> <template slot-scope="scope">...el-row :clas.
  • 利用Vue做项目过程中,经常使用v-for渲染多个重复组件或dom元素,比如:传递json/字典,如下所示: <!--element实现折叠文件夹--> <el-collapse ref="el_collaps_container" v-for="(value,key,index) in ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,496
精华内容 2,598
关键字:

vue局部刷新数据的方法

vue 订阅