【急】引入的外部js函數(shù)不能獲取vue的document嗎？元素為空無(wú)法讀取問(wèn)題

【急】業(yè)務(wù)需求一個(gè)日歷頁(yè)面，就找到一個(gè)js日歷插件嘗試導(dǎo)入，結(jié)果因?yàn)閷?duì)vue引入js不了解折騰了兩天出了各種各樣的問(wèn)題，求大佬們幫幫忙。報(bào)錯(cuò)如下：（Uncaught TypeError: Cannot read property 'style' of null）報(bào)錯(cuò)代碼位置已經(jīng)在代碼中標(biāo)注。因?yàn)樽⑨尩魣?bào)錯(cuò)位置1的這行代碼報(bào)錯(cuò)位置2的那行又會(huì)報(bào)錯(cuò)，個(gè)人分析是document沒(méi)有獲取到，請(qǐng)問(wèn)是這個(gè)原因嗎？怎么解決？
圖片描述

報(bào)錯(cuò)的位置是引入的js文件，部分代碼如下：
【simple-calendar-es6.js】

class SimpleCalendar {
  //構(gòu)造函數(shù)
  constructor(query, options) {
    //默認(rèn)配置
    this._defaultOptions = {
      width: '500px',
      height: '500px',
      ...
    }

    //容器
    this.container = document.querySelector(query);
//報(bào)錯(cuò)位置1---------------------------
    this._defaultOptions.width = this.container.style.offsetWidth;
    this._defaultOptions.height = this.container.style.offsetHeight;

    //this._options = Object.assign({}, this._defaultOptions, options);

    //得到最終配置
    this._options = this.optionAssign(this._defaultOptions, options);

    this.create();
  }
  create() {
    var root = this.container;
    //報(bào)錯(cuò)位置2----------------------------------------
    root.innerHTML = '<div class="sc-header"> </div> <div class="sc-body"> </div>';
    root.style.width = this._options.width;
    root.style.height = this._options.height;
    ｝

vue代碼如下
【content.vue】

<template>
  <div id="content" style="font-family:微軟雅黑">
      <br>
      <h4>------------------------------------------------------------------------</h4>

      <link rel="stylesheet" type="text/css" href="http://localhost:8080/src/css/simple-calendar.css">
      <div  id="container"></div>

      <h4>------------------------------------------------------------------------</h4>
  </div>
</template>

<script>
import  SimpleCalendar from '../js/simple-calendar-es6.js'
var myCalendar = new SimpleCalendar('#container');
  alert("測(cè)試1");
export default {
  data() {
    return {
      //button:"預(yù)定",
    }
  }
}
</script>

<style>
</style>

這是按照插件給的方式來(lái)做的
圖片描述

回答

編輯回答

妖妖

var myCalendar = new SimpleCalendar('#container');放在mounted里面，放在外面此時(shí)渲染還沒(méi)完成，找不到dom

export default {
  data() {
    return {
      //button:"預(yù)定",
    }
  }
    mounted:(){
    this.$nextTick(()=>{
     var myCalendar = new SimpleCalendar('#container');
})
    }
}

2017年12月30日 17:56

編輯回答

悶騷型

vue 它內(nèi)部是有生命周期這一說(shuō)法你在引入處直接用他是沒(méi)有辦法得到你的值
從而無(wú)法在虛擬dom 構(gòu)建也從而無(wú)法在真實(shí)DOM掛載

2017年6月9日 07:35