vue.js - Vue 设置定时器后不能向组件传值。

问题描述

问 题

1.在使用vue设置监听传值的过程的时候。不进行定时器设置。
代码：
方法位于钩子函数beforeMount

 var self = this;
            SessionToken = sessionStorage.getItem("Token");
            SessionSubUrl = sessionStorage.getItem("SubUrl");

            axios.get("/warn/vehicle",{
                baseURL: "http://192.168.0.109:9000/api/0.1/",
                data: {
                        SubUrlMapu: SessionSubUrl,
                    },
                headers: {"Content-Type":"application/json","TOKEN": SessionToken}
                }).then(function(res){
                    var carInfo = res.data.Data;

                    self.carInfoObj = res.data.Data;
                    console.log(self.carInfoObj)
                  
                }).catch(function(){

              })
              

2.<amapMointor :childCarInfo="carInfoObj" style="width:100%;height:74vh"></amapMointor>

数据的绑定。

3.地图组件（部分代码删掉）

  import carSafeImg from './img/carsafe.png'
  import carWarnImg from './img/carwarn.png'
  export default{
            name:'amapMointor',
            props:['childCarInfo'],
            mounted: function () { 
            //地图初始化  
            this.map = new AMap.Map(this.$el, {
                resizeEnable: true,
                zoom: 12,
                })           
            },
            watch:{ 
                childCarInfo:function(){
                     var self = this;
                     //循环遍历返回的数据对象
                     for(let i in this.childCarInfo){

                       var car_Info = this.childCarInfo[i];
                       console.warn(car_Info)
                       /*
                          判断车辆是否出勤
                          State == 0 表示无任务状态
                       */
                       if(car_Info.State == 0){
                          //此时车辆处于未出勤状态，不予显示
                       }else{

                          var longLatVal = [];
                          longLatVal.push(car_Info.LONG);
                          longLatVal.push(car_Info.LAT);


                         
                          var  imgJudje = '';
                          if(car_Info.SpeedStatus == 1 || car_Info.SpeedStatus == 3 || car_Info.SpeedStatus == 4 || car_Info.Offline == false ||  car_Info.WarnCashboxCount != 0){
                                   imgJudje = carWarnImg;
                          }else{
                            imgJudje = carSafeImg;
                          }

                          var marker = new AMap.Marker({
                          position:longLatVal,
                          icon: new AMap.Icon({            
                              size: new AMap.Size(100, 100),  //图标大小
                              image: imgJudje,
                              // imageOffset: new AMap.Pixel(0, -60)
                            })
                       });              
                      marker.setTitle(carWarnInfo);

                      marker.setMap(this.map);
                      this.map.setFitView();

                      }

                      }
                    
                }  
            }

     }

问题：一旦设置添加定时器方法之后。值不能传递给地图组件。如何解决？

setInterval( function carInfoInterval(){

   
       var self = this;
    SessionToken = sessionStorage.getItem("Token");
    SessionSubUrl = sessionStorage.getItem("SubUrl");

    axios.get("/warn/vehicle",{
        baseURL: "http://192.168.0.109:9000/api/0.1/",
        data: {
                SubUrlMapu: SessionSubUrl,
            },
        headers: {"Content-Type":"application/json","TOKEN": SessionToken}
        }).then(function(res){
            var carInfo = res.data.Data;
            console.log(carInfo)

            self.carInfoObj = res.data.Data;
            console.info(self.carInfoObj)
          
        }).catch(function(){

      })

 },5000)

解决方案

   beforeMount:function(){
         //设置定时器，每3秒刷新一次
         setInterval(carInfoInterval,3000)

         var self = this;
         function carInfoInterval(){ 

          SessionToken = sessionStorage.getItem("Token");
          SessionSubUrl = sessionStorage.getItem("SubUrl");

          axios.get("/warn/vehicle",{
              baseURL: "http://192.168.0.109:9000/api/0.1/",
              data: {
                      SubUrlMapu: SessionSubUrl,
                  },
              headers: {"Content-Type":"application/json","TOKEN": SessionToken}
              }).then(function(res){
              var carInfo = res.data.Data;
              self.carInfoObj = res.data.Data;    
            }).catch(function(){
          })
         }
         carInfoInterval();        
        },

通过此方法可以。

这篇关于vue.js - Vue 设置定时器后不能向组件传值。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！