精华内容
下载资源
问答
  • 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局部刷新页面的三种方法

    千次阅读 2020-02-20 16:00:14
    方法一: location.reload(); 方法二: this.$router.go(0);...在App.vue中 <template> <router-view v-if="isRouterAlive"/> </template> <script> export default...
    方法一: location.reload();
    方法二: this.$router.go(0);
    方法三: provide() 与 inject 结合;
    1. 在App.vue中
    <template>
        <router-view v-if="isRouterAlive"/>
    </template>
    
    <script>
    export default {
      name: 'App',
      provide () {
        return {
          reload: this.reload
        }
      },
      data () {
        return {
          isRouterAlive: true
        }
      },
      methods: {
        reload() {
          this.isRouterAlive = false
          this.$nextTick(function(){
            this.isRouterAlive = true
          })
        }
      }
    }
    </script>
    
    1. 在组件中
    export default {
      inject: ['reload'],
      methods: {
        refreshPage () {
          this.reload()
        }
      }
    }
    
    展开全文
  • 1.vue2.0为例,在App.vue文件中写 <template> <div id="app"> <!--<img src="./assets/logo.png">--> <router-view v-if="isRouteAlive"/> </div> </template&g...

    1.vue2.0为例,在App.vue文件中写

    <template>
      <div id="app">
        <!--<img src="./assets/logo.png">-->
        <router-view v-if="isRouteAlive"/>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App',
      provide () {
        return {
          reload: this.relord
        }
      },
      data () {
        return {
          isRouteAlive: true
        }
      },
      methods: {
        reload () {
          this.isRouteAlive = false
          this.$nextTick (() => {
            this.isRouteAlive = true
          })
        }
      }
    }
    </script>

    2.在需要使用局部刷新的页面写:

    <template>
      <div class="hello">
        <el-button @click="refresh">刷新</el-button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      inject: ['reload'],
      created () {
        console.log('created-测试')
      },
      mounted () {
        console.log("mounted-测试")
      },
      methods: {
        refresh () {
          this.reload()
        }
      }
    }
    </script>

     

    转载于:https://www.cnblogs.com/fanlina/p/10709853.html

    展开全文
  • 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局部定时刷新

    2020-06-16 17:11:38
    定时刷新一般都会想到定时器,vue局部定时刷新如下: 一、设置定时器 timer: "",//定时器 //定时器刷新待办事项 this.timer = setInterval(() => { self.reload(); }, 1000); 二、局部刷新 <div class...
  • 主要介绍了vue实现局部刷新的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue局部组件刷新

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

    2020-06-16 19:56:38
    VUE实现局部刷新 可以使用2.2.0 新增的provide / inject控制的显示隐藏 在App.vue文件中添加以下coding: <div id="app"> <router-view v-if="isRouterAlive"/> </div> <script> export ...
  • vue局部组建刷新

    2018-05-18 07:59:00
    方法1:v-if 局部刷新,如果组件复杂,可以尝试方法2. 方法2:给当前组件设置一个key值,值放在data里,然后需要刷新时,改变一下key值。 <template> <div> <Hello :key="hello" @click=...
  • Vue局部刷新组件

    2021-01-17 19:58:05
    vue局部刷新组件,可以使用provide/inject方法,在App.vue中添加刷新方法,路由初始状态是显示的 1、在template中添加的内容 <template> <router-view v-if="isRouterAlive"></router-view>...
  • 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" @...
  • 关于VueRouter的局部刷新的问题 最近自己在做一个Vue+ElementUI的后台管理系统Demo,首页如下图,点击左侧菜单的时候,右侧主区域无法局部刷新而是整个页面全局刷新了。
  • Vue中组件局部刷新

    2021-05-26 13:32:26
    1.序言 (1)provide与inject 在实现组件局部刷新之前先来说一说provide与inject方法。 provide是放在最上层的页面,可以实现传数据给它的子组件和多重孙...2.provide与inject实现VUE中组件局部刷新 首先在app.vue.
  • vue中的局部刷新

    2020-03-10 16:32:48
    局部刷新 刷新页面有很多种方式 1、this.$router.go(0) 这种方法页面会一瞬间的白屏,体验不是很好,虽然只是一行代码的事 2、location.reload() 这种也是一样,画面一闪,效果总不是很好 3,、 局部刷新,很好用 第...
  • 带你快速在Vue中实现局部刷新

    千次阅读 2020-10-25 19:39:03
    Vue中实现局部刷新需要使用Vue里面的provide+inject组合 1.首先来到Vue中的App.vue页面,进行修改 2.来到需要实现局部刷新vue页面,使用inject导入引用reload,然后进行调用 这样就可以了。
  • (1)首先引入这个组件 (2)在data中定义一个空的timer (3)接着在触发一个事件之后去进行局部的组件刷新 这样就可以进行组件刷新
  • vue 实现局部组件刷新

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

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,376
精华内容 2,950
关键字:

vue局部刷新

vue 订阅