Vue中解决js获取不到未初始化的控件对象的方法

问题描述

• 在使用Vue发编写页面时，并不是所有的页面中的控件在初始化的时候都会进行加载
• 这个时候，当js中调用该控件的事件时，就会无法找到该控件导致调用是事件的失败

问题原因

• 当页面初始化时，该页面默认显示的控件都会进行加载
• 但是有一些页面中的控件如dialog，页面初始化时，它大部分情况下是隐藏的，所以依附在它上面的控件并不是一开始就加载的
• 当这些控件显示出来的时候，调用其方法时，会存在找不到相应的对象的情况，从而导致调用相关方法的失败

解决办法

//调用方法内部中
setTimeout(() => {
//判断控件对象是否存在
//初始化页面未初始化的控件对象
}, 0);

实例

• 控件

  <el-dialog
  :title="控件延迟加载"
  :visible.sync="addFaceDialogVisible">
  <el-button type="primary" id="add_pic_btn">添加</el-button>
  </el-dialog>
  

• 数据

  addFaceDialogVisible:false,
  plUploader:null,
  add_face_pic:nukk,
  add_face_pic_key:null,
  

• 事件

  initUpload: function () {
  let self = this;
  this.add_face_pic = null;
  this.add_face_pic_key = null;
  let randomStr = Math.random().toString(36).substr(2);
  this.plUploader = new plupload.Uploader({
  runtimes: 'html5,flash,silverlight,html4',
  url: '/upload?session_id=' + randomStr,
  browse_button: 'add_pic_btn',
  multi_selection: false,
  max_file_size: '10mb',
  chunk_size: '1mb',
  filters: {
  mime_types: [
  {
  title: 'Image files',
  extensions: 'jpg,gif,png,bmp'
  }
  ],
  },
  init: {
  FilesAdded: function (up, files) {
  up.start()
  },
  FileUploaded: function (up, file, info) {
  let obj = JSON.parse(info.response);
  let key = obj.model.name;
  self.add_face_pic_key = key;
  self.add_face_pic = '/image?image=' + key;
  },
  }
  });
  this.plUploader.init();
  },
  

• 在上述实例中，存在问题
  • 当dialog创建时，单击按钮（add_pic_btn）时，并不会进行图片上传的操作，没有任何的反馈
• 解决办法
  1. 页面初始化的时候在挂载方法中进行初始化dialog，然后在进行隐藏，之后调用时判断plUploader对象是否存在，存在时不创建 -- 弊端:整个页面初始化时控件加载会闪一下，体验不友好
  2. 在dialog弹出时，setTimeout加载控件

     if (this.plUploader == null) {
     setTimeout(() => {
     this.initUpload();
     }, 0);
     }
     

可能会出现的问题

• 当在同一页面多次调用控件的方法时，会出现连续弹出框的时候，应该是控件连续被创建，注意控件是否为null的判断，当控件不为null再进行创建，否则直接用已经存在的对象

最后

以上就是不安宝马为你收集整理的Vue中解决js获取不到未初始化的控件对象的方法Vue中解决js获取不到未初始化的控件对象的方法的全部内容，希望文章能够帮你解决Vue中解决js获取不到未初始化的控件对象的方法Vue中解决js获取不到未初始化的控件对象的方法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。