精华内容
下载资源
问答
  • 今天小编就为大家分享一篇vue实现一个方法执行后执行另一个方法的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 近期做一个项目遇到一点问题 :前端请求后台接口数据 请求完成 ,将请求到的数据进行赋值,但是没有请求成功的时候就已经赋了值 ,后来就想到将请求方法执行完毕以后再进行赋值就查找资料,后来大部分解决都用...

    近期做一个项目遇到一点问题 :前端请求后台接口数据 请求完成后 ,将请求到的数据进行赋值,但是在没有请求成功的时候就已经赋了值 ,后来就想到将请求方法执行完毕以后再进行赋值就查找资料,后来大部分解决都用promise就解决的

    解决方法实例如下:

    function2(){
        // 你的逻辑代码 
        return Promise.resolve(/* 这里是需要返回的数据*/)
    }
    
    function3(){
        // 你的逻辑代码 
        return Promise.resolve(/* 这里是需要返回的数据*/)
    }
    
    // 调用
    function1(){
        this.function2().then(val => { 
            this.function3();
        });
    }
    

    但是我用如上方法测试了一下发现,还是没能实现  

    接下来就只能用一个办法了:就是将请求后台接口的方法axios异步机制改装成同步机制进行实现

    async/await 用法

         (注意:axios用法)

    创建方法时:

    async function BtnShow(menuId) {
      //按钮初始化
      for (let x in Btns) {
        Btns[x] = false;
      }
      
      var roleId = localStorage.getItem("roleId");
    
      let res = await axios
        .post(
          baseURL + "/*****/*****",
          qs.stringify({
            Role: roleId,
            Menu: menuId
          }),
          {}
        )
      var bdata = res.data;
      console.log(res.data);
      for (var i = 0; i < bdata.length; i++) {
        if (bdata[i].operationCode == "add") {
          Btns.add = true;
        }
        if (bdata[i].operationCode == "query") {
          Btns.query = true;
        }
      }
    }

    调用方法时:

    async created(){
        var menuId = this.$route.query.menuId;
        await this.GLOBAL.BtnShow(menuId); 
      },

    这样就可以解决我的问题了,,

    展开全文
  • 需要子组件得地方添加: <component :is="currentCom"></component> 引入子组件: ...import MaterialVoice from '@/components/Account/Material/MaterialVoice/index.vue...执行自己的方法赋值 Materi...
    1. 需要子组件得地方添加:
    <component :is="currentCom"></component>
    
    1. 引入子组件:
    import MaterialVoice from '@/components/Account/Material/MaterialVoice/index.vue'
    
    1. data里面声明初始化值currentCom
    2. 执行自己的方法赋值 MaterialVoice 给 currentCom
    methods: {
      condiation () {
        // ....some code
        this.currentCom = MaterialVoice 
      }
    }
    

    currentCom就是你引入的组件
    转载于:https://www.cnblogs.com/Mr-Rshare/p/11065579.html

    展开全文
  • vue 方法执行后再执行另一个方法

    千次阅读 2020-09-25 09:38:56
    function2(){ return new Promise((resolve, ... } //所有的方法按照顺序执行 function run(){ Promise.all([ this.fun1(), this.fun2(), this.fun3() ]).then(res => { /* 你的逻辑代码 */ console.log(“run”); }) }

    function2(){
        return new Promise((resolve, reject) => {
          //你的逻辑代码
          resolve(/* 这里是需要返回的数据 /)
        });
    }
    function3(){
      return new Promise((resolve, reject) => {
        //你的逻辑代码
        resolve(/
    这里是需要返回的数据 */)
      });
    }

    // 调用
    function1(){
      this.function2().then(val => {
        this.function3();
      });
    }
    //所有的方法按照顺序执行
    function run(){
    Promise.all([
    this.fun1(),
    this.fun2(),
    this.fun3()
    ]).then(res => {
    /* 你的逻辑代码 */
    console.log(“run”);
    })
    }

    展开全文
  • 今天vue项目的时候遇到了这样一个问题当我点击一个二级菜单的时候会进入到相应的页面,但是这个页面的created方法执行 代码如下: data(){ return{ uploadData: { userId: '123', } } }, methods: { ...

    今天在写vue项目的时候遇到了这样一个问题当我点击某一个二级菜单的时候会进入到相应的页面,但是这个页面的created方法不执行

    代码如下:

    data(){
      return{
          uploadData: {
            userId: '123',
          }
        }
      },
    methods: {
       resetEditFrom() {
         this.editForm = {}
       },
       created() {
         console.log("come in...............")
         const _this = this
         this.$axios.get("/User/imageUrl/"+sessionStorage.getItem("userId")).then(function (resp) {
           console.log(resp.data)
           _this.userInfo.avatar = resp.data
         })
       }
    }
    

    很明显我将created方法放到了methods中,正确的做法应该是放到和data()、method同级别,代码如下:

    data(){
      return{
          uploadData: {
            userId: '123',
          }
        }
      },
    methods: {
       resetEditFrom() {
         this.editForm = {}
       }
    }created() {
      console.log("come in...............")
      const _this = this
      this.$axios.get("/User/imageUrl/"+sessionStorage.getItem("userId")).then(function (resp) {
        console.log(resp.data)
        _this.userInfo.avatar = resp.data
      })
    }
    
    展开全文
  • vue点击空白处执行某方法

    千次阅读 2019-06-13 20:18:58
    Vue.directive('clickOutSide', { bind(el, binding, vnode) { el.handler = function(e) { if (el.contains(e.target)) { return false } // vnode.context[bindin...
  • 我想要跳转一个页面,并且想要跳转执行某方法;咱们也都知道要使用created方法的话,只有创建时好使,后面就不会执行created方法了 可能是我比较笨试了几种方法 携手天下 的帮助下才解决 此问题解决方案: ...
  • jQuery中可以这样写 ...以上所述是小编给大家介绍的Vue.js页面加载时执行某个方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。此也非常感谢大家对软件开发网网站的支持!
  • vue定时执行函数方法

    2021-06-30 15:14:07
    内部方法setInterval(函数,定时时间) 5000是5秒,每5秒调一次接口 methods: { // 测试函数 testHtml() { console.log("测试") }, mounted() { //定时任务方法 this.$nextTick(() => { setInterval...
  • 一、.html页面引入vue,了解vue的基础...标签引入Vue· 创建Vue实例,创建挂载点(dom)· 设置数据,挂载元素· 渲染,把vue实例的数据绑定到指定的视图上2.关于制定模板的方式:1. 以上这种方式的模板的来源是通过...
  • vue v-for循环渲染完毕后执行方法

    千次阅读 2019-11-14 10:16:42
    背景:把jq插件放vue用发现页面加载时执行方法获取到v-for的元素长度为0 所以无法执行操作 故寻找解决办法 原文: 项目时用到了一些插件,比如这次用了下拉菜单插件。 这个插件需要实例化,而下拉框的数据是...
  • watch: {// 如果路由有变化,会再次执行方法 '$route': 'getOrderInfo'//getOrderInfo为自定义方法 },
  • vue 设置一页面不缓存的方法

    千次阅读 2019-06-27 15:07:18
    之后,如果页面Detail.vue不需要缓存功能,可使用如下方法: 1、mounted不执行,只有activated执行: activated() { this.getFun(); } 2、App.vue 设置 <keep-alive exclude="Detail"> exclude="Detail...
  • https://www.jianshu.com/p/50e118628054
  • Vue.js页面加载时执行某个方法

    千次阅读 2019-10-20 00:28:49
    vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted <script> import { requestUserrList } from '../api/api_user'; export default { data() { return { name:"", ...
  • 需求:在某一网页,通过上下左右键控制一些操作 实现: 1.基本代码: 因为没有绑定特定的元素.所以我们将事件绑定到document上. //当前页面监视键盘输入 document.onkeydown = function(e) { console.log('...
  • 项目中一直用elementUI组件,但是有些需求是需要定制化开发的,不能完全的依赖组件现有功能,比如: 定制化下拉菜单,并提供带有提示标志的单选和多选等 小伙伴们相信也碰到不少这样的例子,最头疼的就是点击...
  • Vue 初始化 执行过程

    2021-01-09 17:39:52
    Vue 初始化 执行过程 先platforms 下的 entry-runtime-with-compile.js 调用 Vue.$mountd 的获取el对象, 挂载mount方法 ,将Vue的模块导出 找到 core/instance/index.js ,获取 vue的构造函数, 初始化Vue 上的...
  • SpringMVC框架+vue,前后端一体开发, 用户打开网站登录进入我们系统主页,比如叫 http://127.0.0.1:8080/test/main, 需求如下: 1、用户每次第一次进入系统主页时,需要弹出一个提示信息,如果打开多个页签...
  • computed是DOM执行完成立马执行(如:赋值) created执行时挂载阶段还没有开始,模版还没有渲染成html,所以无法获取元素。created钩子函数主要用来初始化数据。 mounted钩子函数一般用来向后端发起请求,拿到...
  • <p style="text-align:center"><img alt="" height="758" src="https://img-ask.csdnimg.cn/upload/1616936229893.jpg" width="1064" /></p>  </p>
  • Vue生命周期函数也叫Vue生命周期钩子,就是Vue实例在某一时间点自动执行的函数。 一个有11个生命周期函数, 分别是: beforeCreate : 创建Vue实例前的时候执行, created : 创建Vue实例完成后执行, ...
  • vue生命周期以及执行顺序

    千次阅读 2019-08-06 10:27:07
    前言: Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据...实例创建完成被立即调用,这一步,实例已完成以下配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载...
  • 比如一个弹窗需要请求表格跟树组件的数据需要发两个请求,这时我们需要等两个请求完成拿到数据再去打开弹窗。 多个请求 axios.all([axios.post("/test1"),axios.post("/test2")]).then((test1,test2)=>{ ...
  • 是因为 Vue 的路由使用了 Hash 模式,是单页面应用的经典用法,但连尤雨溪本人都觉得不太好看,所以可以路由配置中选择使用 History 模式,但会引发一些问题,需要后端作出处理,所以这里先不更改,之后我单独...

空空如也

空空如也

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

vue在某方法后执行

vue 订阅